React组件相关

props 和 state 的区别

state--> 用于控制组件自身状态，组件内部可以修改-setState--作为可变状态使用
props--> 子组件通过props接受父组件传递的参数，组件内部无法控制修改--做为不变数据或者初始化数据

state 和 setState

• setState(updater[,callback])
  • updater: 更新数据 FUNCTION/OBJECT
  • callback: 更新成功后的回调 FUNCTION

    异步方法:一次性批量更新来保证渲染的性能, 若多次调用会覆盖
    浅合并 Objecr.assign(),只合并第一层,引用类型需要手动进行合并

组件间通信

React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

• 父级向子级通信
  把数据传递给子级，子组件从props属性中获取父级数据
• 子级向父级通信
  把该方法传递给子级，在子级中调用该方法向父级传递消息
• 跨组件通信 context

组件的生命周期

指的是组件从创建到销毁的过程，可以更加精确的对组件进行控制

生命周期演变 16.4版本之后

• 挂载阶段 （组件初始化-->渲染到DOM中）
  • constructor(props){
    super(props) -- ①初始化
    this.state = {}
    }
  • static getDerivedStateFromProps(props){
    return props; -- ②props关联到state中
    }
    • 静态方法无this
  • render(){
    -- ③生成虚拟dom
    }
  • componentDidMount()
    {
    -- ④生成真实DOM,处理副作用(异步操作,获取真实dom节点)
    }
• 更新阶段
  - static getDerivedStateFromProps(props) -- ①props更新到state中
  - shouldComponentUpdate() -- ②判断是否更新
  - render() -- ③生成虚拟dom
  - getSnapshotBeforeUpdate() -- ④获取更新前的dom
  - componentDidUpdate() -- ⑤生成真实DOM,处理副作用
• 卸载阶段
  • componentWillUnmount -- 删除添加在全局的一些信息或操作

受控组件

受控组件: 让 表单控件的内部状态 和 组件的state 保持一致
非受控组件: 不需要同步state (defaultValue，defaultChecked)

React 中的事件

• this统一指向undefined
  -解决：使用箭头函数=>