React 学习笔记(一)

1. PropTypes & DefaultProps

   • PropTypes 对通信间传入的值进行校验

     import PropTypes from 'prop-types'
     

     TodoItem.propTypes = {
       // arrayOf 或者 是数字 或者是 字符串
       // arrayOf( PropTypes.number , PropTypes.string )
       //基本的一些类型
       optionalArray: PropTypes.array,
       optionalBool: PropTypes.bool,
       optionalFunc: PropTypes.func,
       optionalNumber: PropTypes.number,
       optionalObject: PropTypes.object,
       optionalString: PropTypes.string,
       optionalSymbol: PropTypes.symbol,
       
       //
       optionalNode: PropTypes.node,
     
       // 一个 React 元素
       optionalElement: PropTypes.element,
     
       //也可以检查是不是一个类的实例
       optionalMessage: PropTypes.instanceOf(Message),
     
       //检查是不是其中确切的值之一
       optionalEnum: PropTypes.oneOf(['News', 'Photos']),
     
       //也可以是这些类型其中之一
       optionalUnion: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number,
         PropTypes.instanceOf(Message)
       ]),
     
       // 一个某种类型的数组
       optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
     
       // 一个特定形式的对象
       optionalObjectWithShape: PropTypes.shape({
         color: PropTypes.string,
         fontSize: PropTypes.number
       }),
     
       //isReauired修饰的值表示必须传入 不能为空 且必须是string(或者其他)
       optionalisStringReauired: PrpTypes.string.isRequired
       
       // 任何数据类型的值
       requiredAny: PropTypes.any.isRequired,
     
     
     }
     复制代码

   • defaultProps

     • 如果没传入设定一个默认值

       TodoItem.defaultProps = {
         content: 'this is null'
       }
       复制代码

   • 更多详情见文档 Typechecking With PropTypes Doc

2. Props ,State 与 render 函数
   • 当组件的state 或者 props进行改变的时候 render函数就会重新执行
   • 当父组件的render函数被运行时 它的子组件的render都将被重新运行
3. 虚拟DOM (本质就是一个js对象 用来描述真实DOM)
   • react利用虚拟DOM渲染的流程
     • :point_down: state数据
     • :point_down: jsx模板
     • :point_down: state数据和jsx模板结合 先生成一个虚拟DOM

       React.createElement(tagName,{attr}, content)
       复制代码

     • :point_down: 用虚拟DOM生成真实DOM来显示
     • :point_down: state数据改变
     • :point_down: 数据 + 模板 重新渲染 生成新的虚拟DOM 并与 之前的虚拟DOM做对比 找出改变的那一部分 是两个js对象之间的对比
     • :point_down: 找到变化后 直接操作DOM 更新
   • 优点:
     1. 性能提升
     2. 跨端得以实现 RN..
   • 虚拟DOM中的Diff算法 (different, 找差异算法)
     • 虚拟DOM树是同层比较的
     • key值是对比中的一个标识 所以key值要保持稳定 尽量不用index作为key 用item
4. 用ref来操作DOM (避免使用..因为推荐数据驱动的方式 不操作DOM)
   • e.target 也可以获取到
   • 给相应的元素添加 ref="xxx" 的属性, 然后 this.refs.xxx 获取到DOM元素
   • ref={ (xxx) =>{ this.xxx = xxx } } 相应的 this.xxx 就是那个DOM元素了
5. setState()
   • 是一个'异步'操作 立马执行完之后React会对state的所有改变进行合并处理之后 才会重新去计算新的虚拟DOM 再根据最新的虚拟DOM去重新渲染真实DOM
     但是 这个异步是伪异步 只是维护了一个updataQueue 并不是说本身就是异步代码实现的
   • 第二个参数是一个回调函数, 即视图更新完毕后调用 就会避免某些值获取不到的情况
6. React的生命周期函数
   • 在某一个时刻组件会自动执行的函数
   • Initialization (初始化一些数据)

     • constructor 初始化state和props 以及一些函数this指向问题

       constructor 不是React独有的 是es6 class语法 这里完美契合了React

   • Mounting (挂载时的生命周期 ,注意是第一次挂载时 之后数据更新,虚拟DOM更新后的挂载不算)

     componentWillMount
     componentDidMount
     

   • Updation (组件更新的流程)
     • props发生变化

       • props 发生变化时 最开始会有一个

         componentWillReceiveProps 一个组件从父组件接收参数, 只要父组件的 render 函数被重新执行了 子组件的中国生命周期函数就会被执行

     • 共同的生命周期函数
       • shouldComponentUpdate 组件被更新之前 自动执行
         需要return一个布尔值
         如果return true 组件会被更新
         如果return false 组件不更新 且之后的生命周期函数都不执行了
         如果这个组件第一次存在于父组件中 不会被执行
         如果这个组件之前已经存在于父组件中 才会执行
       • componentWillUpdate 组件更新之前会被自动执行 但是在 shouldComponentUpdate 之后执行 如果 shouldComponentUpdate return false 就不执行了
       • render 知道要数据更新了 所以 render 函数又会自动执行 更新组件
       • componentDidUpdate 组件更新完毕之后执行
   • Unmounting
     • componentWillUnmount 当组件即将被销毁时执行 此时还未被移除
   • 网上扣了张图..侵删..
     需要注意的是 图中最开始的两个函数在使用es6 constructor 时就不需要了

     

悄咪咪说一下今天是世界微笑日(orz),祝大家快乐:grinning: