componentDidMount（）頁面加載完后執行
componentDidUpdate（prevProps）每次進頁面都會無限調用，需要條件控制
componentWillReceiveProps（props） 這個是父組件有數據變化 子組件會及時更新的事件 如果你只執行一次 不用反復執行 就不用管
componentWillMount（）頁面銷毀的時候執行
《《《---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------》》》
在單頁面里面，父子組件傳值是比較常見的，react的父子組件傳值，和vue差不多的思路，父組件向子組件傳值，父通過初始state，子組件通過this.props進行接收就可以了；子組件向父組件傳值需要綁定一個事件，然后事件是父組件傳遞過來的this.props.event來進行值的更替，
父組件向子組件傳值：
父組件Comment.js:
import React from "react"
import ComentList from "./ComentList"
class Comment extends React.Component {
constructor(props) {
super(props);
this.state = {
arr: [{
"userName": "fangMing", "text": "123333", "result": true
}, {
"userName": "zhangSan", "text": "345555", "result": false
}, {
"userName": "liSi", "text": "567777", "result": true
}, {
"userName": "wangWu", "text": "789999", "result": true
},]
}
}
render() {
return (
<div>
<ComentList arr={this.state.arr}> //這里把state里面的arr傳遞到子組件
</ComentList>
</div>
)
}
}
export default Comment;
子組件ComentList.js:
import React from "react"
class
ComentList
extends
React.Component {
constructor(props) {
super
(props);
}
render() {
return
(
<div className=
"list"
>
<ul>
{
this
.props.arr.map(item => {
//這個地方通過this.props.arr接收到父組件傳過來的arr，然后在{}里面進行js的循環
return
(
<li key={item.userName}>
{item.userName} 評論是:{item.text}
</li>
)
})
}
</ul>
</div>
)
}
}
export
default
ComentList;
子組件向父組件傳值，
同樣是父組件：
import React from "react"
import
ComentList from
"./ComentList"
class
Comment
extends
React.Component {
constructor(props) {
super
(props);
this
.state = {
parentText:
"this is parent text"
,
arr: [{
"userName"
:
"fangMing"
,
"text"
:
"123333"
,
"result"
:
true
}, {
"userName"
:
"zhangSan"
,
"text"
:
"345555"
,
"result"
:
false
}, {
"userName"
:
"liSi"
,
"text"
:
"567777"
,
"result"
:
true
}, {
"userName"
:
"wangWu"
,
"text"
:
"789999"
,
"result"
:
true
},]
}
}
fn(data) {
this
.setState({
parentText: data
//把父組件中的parentText替換為子組件傳遞的值
},() =>{
console.log(
this
.state.parentText);
//setState是異步操作，但是我們可以在它的回調函數里面進行操作
});
}
render() {
return
(
<div>
//通過綁定事件進行值的運算，這個地方一定要記得.bind(this)，
不然會報錯，切記切記，因為通過事件傳遞的時候
this
的指向已經改變
<ComentList arr={
this
.state.arr} pfn={
this
.fn.bind(
this
)}>
</ComentList>
<p>
text is {
this
.state.parentText}
</p>
</div>
)
}
}
export
default
Comment;
import
React from
"react"
class
ComentList
extends
React.Component {
constructor(props) {
super
(props);
this
.state = ({
childText:
"this is child text"
})
}
clickFun(text) {
this
.props.pfn(text)
//這個地方把值傳遞給了props的事件當中
}
render() {
return
(
<div className=
"list"
>
<ul>
{
this
.props.arr.map(item => {
return
(
<li key={item.userName}>
{item.userName} 評論是:{item.text}
</li>
)
})
}
</ul>
//通過事件進行傳值，如果想得到event，可以在參數最后加一個event，
這個地方還是要強調，
this
，
this
，
this
<button onClick={
this
.clickFun.bind(
this
,
this
.state.childText)}>
click me
</button>
</div>
)
}
}
export
default
ComentList;
