React基础

组合vs继承

• 包含关系

  • 我们建议这些组件使用children属性将子元素直接传递到输出

• 特殊实例

  • 组件可以接受任意元素，包括基本数据类型、React 元素或函数

React 理念

• 当组件的state或者props发生改变的时候，render函数就会重新执行
• 当父组件的render函数被运行时，它的子组件的render都将被重新运行

虚拟DOM

虚拟DOM

深入了解虚拟DOM

image.png

虚拟DOM diff 算法

• 多次setState 合并成一个setState

ref 的使用 是一个回调函数

• ref 获取dom 元素

• setState 异步执行 回调函数

  
  异步执行 回调函数

ref使用

React 的声名周期

image.png

• 声名周期函数指在某一个时刻组件会自动调用执行的函数
• Mounting
  • componentWillMount 在组件即将被挂载在到页面的时刻自动执行
  • render
  • componentDidMount 组件被挂载到页面之后，自动执行
• Updation
  • shouldComponentUpdate 组件被更新之前，他会自动被执行
  • componentWillUpdate
    组件被更新之前，他会自动执行，但是他在shouldComponentUpdate之后；如果shouldComponentUpdate返ture它才执行；如果返回false,这个函数就不会被执行了
  • componentDidUpdate 组件更新完成之后，他会被执行
• Unmounting
  • componentWillUnmount 当这个组件即将被从页面中剔除的时候，才会执行

React 生命周期函数使用场景

• 网络请求数据一般放在 componentDidMount 方法后

使用Charles 进行实现本地数据mock

image.png

React 的 CSS 过渡动画

• 三方框架 react-transition-group
• 安装yarn add react-transition-group