reactday2笔记 组件通信、state、props、组件生命周期

/*

组件之间的通信

1. 父子 组件
   
   
   
2. 兄弟组件
   

props 传递数据
state 修改数据

父组件如何修改子组件

父组件把组件的state 当着子组件的props 传递给子组件
父组件修改 state 会二次render 子组件接收到变化的 props 从而实现子组件修改

ref this.refs 对象获取

1. ref 作用于DOM 元素 指向这个真实的DOM元素
2. ref 作用于组件 指向这个组件对象
   ref = one
   ref = {el=>this.one=el;}
   架构 flux redux mobx

受控组件 input value 指向的是状态 state 受状态的控制的 状态改变 input 才会改变
非受控组件 value 没有绑定状态

// state 状态 类似 vue 里面的 data computed

/*
state 状态 react 组件数据交互的载体 状态用来修改的

1. state 不能在组件外部定义 不能在组件外部 修改 只能在组件内部定义声明 只能在内部修改
2. state 用来被修改的 this.state 获取 state, this.setState() 来修改 state
3. state 在组件内部的 getInitialState (被废弃 )) 来初始化定义 state ,必须返回一个对象
4. state 修改 setState 这个方法会修改 state 会重新执行 组件内部的 render方法 , 会触发页面的
   二次渲染 虚拟DOM 会根据react 的 diff 算法 得到新的虚拟DOM 最后的批量的更新

props

1. react 数据传递载体 props 属性 state 状态 context 组件之间数据交互

2. props (但凡有组件设计的框架 都会 props )
   a. props 默认从组件外部（父组件）传入,props 也能在组件内部初始化定义 getDefaultProps
   b. 组件内部 通过生命周期钩子函数 getDefaultProps (已废弃 ) 来定义初始化的props App.defaultProps = {}
   c. props 肯定不允许被修改 props 只用来传递数据 read-only 单向数据流
   d. props 接收 对象 常量 函数 数组
   e. props 在组件内部 通过 this.props 来获取 key-value
   */

// PropTypes 校验Props
// optionalArray: PropTypes.array,
// optionalBool: PropTypes.bool,
// optionalFunc: PropTypes.func,
// optionalNumber: PropTypes.number,
// optionalObject: PropTypes.object,
// optionalString: PropTypes.string,
// optionalSymbol: PropTypes.symbol,
// 校验 props 接收正确的格式类型的数据

// 封装组件 大概率 使用 props + slot

// v-if &&
// v-for map

// data state this.state 状态
// props props this.props 属性 (组件通信 )

// react 组件的生命周期

// 组件的生命周期 (https://segmentfault.com/a/1190000016617400?utm_source=tag-newest)
/*

react 组件的生命周期
含义 组件从初始化渲染到被移除或者销毁的过程 成为组件的生命周期

1. 每个组件都有生命周期
2. react 通过组件的生命周期钩子函数来管理 组件
3. 系统 某些状态和参数发生改变的时候，系统立马去通知 对应处理的函数叫做钩子函数
   hooks 钩子函数 允许在特定的时期添加用户自己的代码 不同的阶段添加自己的逻辑代码

react 组件的生命周期 分为三个阶段
1.mount 组件的初始化 从虚拟DOM 渲染成为真实DOM 的过程 1
2.update 组件的数据变化 setState 组件的state 更新 导致二次渲染的过程 n
3.unmount 组件销毁 组件因为路由切换而销毁 (浏览器的垃圾回收机制 ) 1

mounted 组件载入阶段 (钩子函数)

0.constructor
1.getDefaultProps 设置组件默认的props 废弃 16已经被废弃 App.defaultPorps
2.getInitialState 设置组件默认的state 废弃 16已经被废弃 this.state state = {}
3.componentWillMount 在jsx被渲染到页面之前被调用 废弃 16尚存 17马上废弃
3.1 getDerivedStateFromProps ( 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；;每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state) 16新增的
4.render 渲染函数是react中默认的函数 虚拟DOM 渲染成真实DOM
5.componentDidMount jsx被渲染到页面后被调用

/
/
update 组件数据更新阶段 组件修改 state 组件接收的props发送改变 都会进入 update 阶段

1. componentWillReceiveProps(nextProps) 接收变化的props 废弃 16尚存 17马上废弃
   2.1 getDerivedStateFromProps 获取最新的props 和 state
2. shouldComponentUpdate 询问是否更新 true 更新 false 不更新
3. componentWillUpdate ==> 组件即将更新之前 废弃 16尚存 17马上废弃
4. render 组件开始二次渲染 update
   3.1 getSnapshotBeforeUpdate 组件更新之前触发 得到旧的props 和 state 16新增
5. componentDidUpdate 组件更新渲染数据完毕

*/
// 组件销毁移除 路由切换
// componentDidCatch
// componentWillUnmount 这个函数几乎不会使用到，因为浏览器本身具有垃圾回收机制