React 生命周期（顺序）和 组件 通信

Posted 2021-02-01 passkey

很多情况下，我们是通过props来定制组件实例的外观及行为,这样的组件我们称之为无状态/stateless的组件，因为在任何时刻，组件 实例的表现都仅仅取决于外部传入的props属性，与 它自身之前的表现毫无关系，即，它本身没有任何记忆

让一个组件拥有记忆能力,根据自身的状态对同样的刺激做出 不同的反应,React的组件的确引入了状态机的概念state

1. setState 尖端使用的方法 callback

//默认初始化close为false
this.setState({close : true},() => {
//setstate 不会及时修改state , 可以在回调中才能得到true
//得到的为true    
console.log(this.state.close)
})
//还是为false    
console.log(this.state.close)

1.1. 设置组件初始状态,可以在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

1.2. 解释下

componentWillMount 组件实例即将挂接（初次渲染）时被调用 这个方法在整个生命周期中只会被调用一次

componentDidMount() - 组件实例挂接（初次渲染）后被调用 这个方法在整个生命周期中只会被调用一次

componentWillUnmount() - 组件实例即将从DOM树移除时被调用 这个方法在整个生命周期中只会被调用一次。

1.3. 上面3个方法是只会触发一次

componentWillReceiveProps(nextProps) - 组件实例即将设置新属性时被调用 参数nextProps表示即将应用到组件实例上的新属性值。

shouldComponentUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用 参数nextProps传入即将应用到组件实例上的新属性值，需要return 布尔值 ，return true 表示 需要渲染 ，false 表示不需要渲染

componentWillUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用 注意：不能在此方法内调用setState()。

componentDidUpdate(prevProps, prevState) - 组件实例重新渲染后被调用

2. React 组件 通信

react是单向数据流

2.1. 父组件 =>> 子组件

父组件 =>> 子组件： 通过 props

2.2. 子组件 =>> 父组件

子组件 =>> 父组件 ： 通过 callback

2.3. 子组件 =>> 子组件

子组件 =>> 子组件 : 子组件 =>> 父组件 =>> 子组件 (callback 和props 组合) 也就是· 子组件通过回调改变父组件中的状态，通过props再修改另一个组件的状态