/*
组件之间的通信
- 父子 组件
- 兄弟组件
props 传递数据
state 修改数据
父组件如何修改子组件
父组件把组件的state 当着子组件的props 传递给子组件
父组件修改 state 会二次render 子组件接收到变化的 props 从而实现子组件修改
ref this.refs 对象获取
- ref 作用于DOM 元素 指向这个真实的DOM元素
- ref 作用于组件 指向这个组件对象
ref = one
ref = {el=>this.one=el;}
架构 flux redux mobx
受控组件 input value 指向的是状态 state 受状态的控制的 状态改变 input 才会改变
非受控组件 value 没有绑定状态
// state 状态 类似 vue 里面的 data computed
/*
state 状态 react 组件数据交互的载体 状态用来修改的
- state 不能在组件外部定义 不能在组件外部 修改 只能在组件内部定义声明 只能在内部修改
- state 用来被修改的 this.state 获取 state, this.setState() 来修改 state
- state 在组件内部的 getInitialState (被废弃 )) 来初始化定义 state ,必须返回一个对象
- state 修改 setState 这个方法会修改 state 会重新执行 组件内部的 render方法 , 会触发页面的
二次渲染 虚拟DOM 会根据react 的 diff 算法 得到新的虚拟DOM 最后的批量的更新
props
-
react 数据传递载体 props 属性 state 状态 context 组件之间数据交互
-
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 组件的生命周期
含义 组件从初始化渲染到被移除或者销毁的过程 成为组件的生命周期
- 每个组件都有生命周期
- react 通过组件的生命周期钩子函数来管理 组件
- 系统 某些状态和参数发生改变的时候，系统立马去通知 对应处理的函数叫做钩子函数
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 阶段
- componentWillReceiveProps(nextProps) 接收变化的props 废弃 16尚存 17马上废弃
2.1 getDerivedStateFromProps 获取最新的props 和 state - shouldComponentUpdate 询问是否更新 true 更新 false 不更新
- componentWillUpdate ==> 组件即将更新之前 废弃 16尚存 17马上废弃
- render 组件开始二次渲染 update
3.1 getSnapshotBeforeUpdate 组件更新之前触发 得到旧的props 和 state 16新增 - componentDidUpdate 组件更新渲染数据完毕
*/
// 组件销毁移除 路由切换
// componentDidCatch
// componentWillUnmount 这个函数几乎不会使用到，因为浏览器本身具有垃圾回收机制