componentDidMount () to load the page after execution
componentDidUpdate (prevProps) into each page will be unlimited calling, we need to control conditions
componentWillReceiveProps (props) This is the parent component data changes subcomponents will update the event if you do not have repeated only once do not have control
componentWillMount () when the page is destroyed execution
《《《---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------》》》
Inside a single page, a parent-child transmission component values are more common, traditional values Sons react the components, and a similar idea vue, parent component subassembly to pass values, the initial parent State, receives subassemblies can pass through this.props a; a sub-component binding event to the parent component values need to pass, then the event is the parent component to pass over this.props.event to replacement value,
Parent component subassembly to pass Found:
parent component 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
},] }})</ div></ ComentList><ComentList this.state.arr arr = {}> // pass the state where the inside of the sub-assembly to arr<div>return (The render () {}
}
export default Comment;
Subcomponents 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;
Value transmitted to the parent sub-assembly components,
The same is the father of components:
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;
