很多情况下，我们是通过props来定制组件实例的外观及行为,这样的组件我们称之为无状态/stateless的组件，因为在任何时刻，组件 实例的表现都仅仅取决于外部传入的props属性，与 它自身之前的表现毫无关系，即，它本身没有任何记忆
让一个组件拥有记忆能力,根据自身的状态对同样的刺激做出 不同的反应,React的组件的确引入了状态机的概念state
setState 尖端使用的方法 callback
//默认初始化close为false
this.setState({close : true},() => {
//setstate 不会及时修改state , 可以在回调中才能得到true
//得到的为true
console.log(this.state.close)
})
//还是为false
console.log(this.state.close)
设置组件初始状态,可以在constructor 中
constructor(props){
super(props)
this.state= {
tag : _tag
}
}
看下面清晰的图片吧,顺序是
1.componentWillMount
2.componentDidMount
3.componentWillReceiveProps
4.shouldComponentUpdate
5.componentWillUpdate
6-componentDidUpdate
(3-6一直重复)
7.componentWillUnmount
Paste_Image.png
解释下
componentWillMount 组件实例即将挂接（初次渲染）时被调用
这个方法在整个生命周期中只会被调用一次
componentDidMount() - 组件实例挂接（初次渲染）后被调用
这个方法在整个生命周期中只会被调用一次
componentWillUnmount() - 组件实例即将从DOM树移除时被调用
这个方法在整个生命周期中只会被调用一次。
上面3个方法是只会触发一次
componentWillReceiveProps(nextProps) - 组件实例即将设置新属性时被调用
参数nextProps表示即将应用到组件实例上的新属性值。
shouldComponentUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用
参数nextProps传入即将应用到组件实例上的新属性值，需要return 布尔值 ，return true 表示 需要渲染 ，false 表示不需要渲染
componentWillUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用
注意：不能在此方法内调用setState()。
componentDidUpdate(prevProps, prevState) - 组件实例重新渲染后被调用
React 组件 通信
react是单向数据流
父组件 =>> 子组件
父组件 =>> 子组件： 通过 props
子组件 =>> 父组件
子组件 =>> 父组件 ： 通过 callback
子组件 =>> 子组件
子组件 =>> 子组件 : 子组件 =>> 父组件 =>> 子组件 (callback 和props 组合) 也就是· 子组件通过回调改变父组件中的状态，通过props再修改另一个组件的状态
1.png
2.png
3.png
4.png
5.png
6.png
网友评论