上期講了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的解釋是
當 React 元素為用戶自定義組件時，它會將 JSX 所接收的屬性（attributes）以及子組件（children）轉換為單個對象傳遞給組件，這個對象被稱之為 “props”
所以，我們通過props能得到父類組件上傳的值，也能通過props.children直接得到jsx寫成的子組件
props是只讀的
React在文檔中強調
所有 React 組件都必須像純函數一樣保護它們的 props 不被更改。
純函數的概念我們已經在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
