react组件分类

1，有状态组件， 有自己的state 在constructor中定义 继承Component基类的方法能够在生命周期内通过setState方法改变state改变Virtul DOM从而从新渲染DOM

    eg: export default class Peoson extends Component{

//oop    

constructor(props){

this.state={}

}

render(){}

}

2.无状态组件 没有定义自己的state 不需要处理用户的输入 组件所有数据依赖props传入 不需要用到生命周期函数

constructor defaultProps componentWillMount render componentDidMount

不需要声明类 避免大量extends class constructor

不需要显示声明this 关键字  es6 的class写法需要把this绑定到当前作用域  

用来定义无副作用的纯函数

const Header =( props) => {

return (

< div className= "container" >

< div className= "row" >

< div className= "col-xs-1 col-xs-offset-11" >

< h1 >Header </ h1 >

</ div >

</ div >

</ div >

);

}

export default Header

3.高阶组件

返回组件的组件（函数）

4.双向数据绑定

state(model)  view  (v)

5.生命周期

UNSAFE_componentWillReceiveProps()

UNSAFE_componentWillReceiveProps(nextProps)

Note

It is recommended that you use the static getDerivedStateFromProps lifecycle instead of UNSAFE_componentWillReceiveProps. Learn more about this recommendation here.

UNSAFE_componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

Note that if a parent component causes your component to re-render, this method will be called even if p rops have not changed. Make sure to compare the current and next values if you only want to handle changes.

React doesn’t call UNSAFE_componentWillReceiveProps() with initial props during mounting. It only calls this method if some of component’s props may update. Calling this.setState()generally doesn’t trigger UNSAFE_componentWillReceiveProps().

Note

This lifecycle was previously named componentWillReceiveProps. That name will continue to work until version 17. Use the rename-unsafe-lifecycles codemod to automatically update your components.

componentWillReceiveProps 不仅在组件props