React三大属性之props的使用详解

目录 类组件 函数组件 props是只读的 组件间通信 上期讲了state，接下来讲讲props。props功能在于组件间通信（父子组件），首先说说在各种组件中的用法： 类组件 ? 0 Comments

目录
  • 类组件
  • 函数组件
    • props是只读的
  • 组件间通信

上期讲了state，接下来讲讲props。props功能在于组件间通信（父子组件），首先说说在各种组件中的用法：

类组件

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//父组件传值

class Father extends React.PureComponent{

render(){

return (

<Son value={"son"} />

)

}

}

class Son extends React.PureComponent{

render(){

return (

<div>this data is {this.props.value}</div>

)

}

}

函数组件

?

1

2

3

4

5

6

7

8

9

10

11

function Fa(){

return (

<Son value={"son"} />

)

}

function Son(props){

return (

<div>this data is {props.value}</div>

)

}

在函数组件中，props只需要传一个值就好了，非常方便 在React文档中，对props的解释是

所以，我们通过props能得到父类组件上传的值，也能通过props.children直接得到jsx写成的子组件

props是只读的

React在文档中强调

纯函数的概念我们已经在redux中解释过了，总而言之，我们不能改变props的值。

组件间通信

现在来总结一下组件间通信:

  • props 首先上一个类组件的写法：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

//父组件给子组件传值以及说过了，现在总结子组件给父组件传值,此时往往需要父组件给子组件先传一个props函数，子组件通过调用传入的函数传值改变父组件的值

export default class Fa extends Component {

state = {faValue:'Fa1'}

changeFa = (value)=>{

this.setState(()=>{

return {faValue:value}

})

}

render() {

return (

<>

<h1>Fa's value is {this.state.faValue}</h1>

<Son changeFa={this.changeFa}/>

</>

)

}

}

export default class Son extends React.PureComponent{

changeValue = ()=>{

this.props.changeFa(this.inputRef.value)

}

render() {

return (

<>

<input type="text" placeholder={"请输入您的值"} ref={(el)=>{this.inputRef = el}}/>

<button onClick={this.changeValue}>change</button>

</>

)

}

}

然后写一个函数组件的写法：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

function Fa(){

const [faValue,setFaValue] = useState("Fa1")

const changeFa = (value)=>{

setFaValue(value)

}

return (

<div>

<h1>Fa's value is {faValue}</h1>

<Son changeFa={changeFa} />

</div>

)

}

function Son(props){

const inputValue = useRef("")

//定义改变fa组件的值的函数

const changeFaValue = ()=>{

props.changeFa(inputValue.current.value)

}

return (

<>

<input type="text" placeholder={"请输入您要改变的值"} ref={inputValue}/>

<button onClick={changeFaValue}>change value</button>

</>

)

}

  • eventbus(订阅-发布机制)

这个可以理解为弱化的redux。这边我们用库pubsub-js来写。写法如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

//比如针对之前的输入案例，我需要给兄弟组件传一个值value，如果不用props,我们该怎么写

Bro:

export default class Bro extends Component {

componentDidMount() {

this.sonData = PubSub.subscribe("brother",(msg,data)=>{

console.log("Bro Component have recived the msg",data);

})

}

componentWillUnmount() {

PubSub.unsubscribe(this.sonData)

}

render() {

return (

<>

<div>brother</div>

</>

)

}

}

Son:

export default class Son extends React.PureComponent{

changeValue = ()=>{

PubSub.publish("brother",this.inputRef.value)

}

render() {

return (

<>

<input type="text" placeholder={"请输入您的值"} ref={(el)=>{this.inputRef = el}}/>

<button onClick={this.changeValue}>change</button>

</>

)

}

}

这个方法常用的就是三个api，第一个subscribe,发布的相应的事件，并且定义事件要做什么事。第二个是publish，订阅发布的事情，并且传入相应要改变的值。第三个是unsubscribe用来取消发布的事情，做内存的优化

以上就是React三大属性之props的使用详解的详细内容，更多关于React三大属性之props的资料请关注服务器之家其它相关文章！

原文链接：https://juejin.cn/post/6950932903274496031

本文链接：https://my.lmcjl.com/post/15456.html

展开阅读全文

相关文章

4 评论

留下您的评论.