React学习计划-React16--React基础（九）react新知识 hooks,路由懒加载，Fragment，Context，组件优化，render props，错误边界

1. setState更新状态的2种写法

1. 对象式的setState:setState(setChange, [callback])
   1. setChange为状态改变对象（该对象可以体现出状态的更改）
   2. callback是可选的回调函数，它的状态更新完毕，界面也更新后（render调用后才被调用）
2. 函数式的setState:setState(updater, [callback])
   1. updater为返回setChange对象的函数
   2. updater可以接收到state和props
   3. callback是可选的回调函数，它的状态更新完毕，界面也更新后（render调用后才被调用）
3. 总结：
   1. 对象式的setState是函数式的setState的简写方式（语法糖）
   2. 使用原则：
      1. 如果新状态不依赖原状态 ==>使用对象式
      2. 如果新状态依赖原状态 ==>使用函数式
      3. 如果需要在setState()执行后获取最新的状态数据，要在第二个参数callback函数中读取

2.lazyLoad： 路由组件的lazyLoad

1. 通过React的lazy函数配合import()函数动态加载路由组件 ==> 路由组件代码会被分开打包

const Login = lazy(()=>import('@/pages/Login'))

2. 通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面

imoprt {Suspense} from 'react'
<Suspense fallback={<Loading/>}> // <Loading/>组件必须是正常引入，不要使用懒加载
  <Switch>
    <Route path="/xxx" component={xxx}/>
    <Redirect to="/login"/>
  </Switch>
</Suspense>

3.Hooks

1. React Hook/Hooks是什么？
   1. Hook是React 16.8.0版本增加的新特性/新语法
   2. 可以让你在函数组件中使用state以及其他额的React特性
2. 三个常见的Hook
   1. State Hook: React.useState()
   2. Effect Hook: React.useEffect()
   3. Ref Hook: React.useRef()
3. State Hook
   1. State Hook让函数组件也可以有state状态，并进行状态数据的读写操作
   2. 语法： const [xxx, setxxx] = React.useState(initValue)
   3. useState()说明：
      • 参数：第一次初始化指定的值在内部作缓存
      • 返回值：包含2个元素的数组，第1个为内部当前状态值，第2个为更新状态值的函数
   4. setXxx()2种写法：
      • setXxx(newValue): 参数为非函数，直接指定新的状态值，内部用其覆盖原来的状态值
      • setXxx(value => newVlaue): 参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值
4. Effect Hook
   1. Effect Hook：可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）
   2. react中额的副作用操作：
      • 发送ajax请求数据获取
      • 设置订阅/启动定时器
      • 手动更改真是DOM
   3. 语法和说明：

   useEffect(()=>{
     // 在此可以执行任何副作用操作
     return()=>{// 在组件卸载前执行
       //在此做一些收尾工作，比如解除定时器/取消订阅等
     }
   },[stateValue])//如果指定的是[]，回调函数只会在第一次`render()`后执行
   

   4. 可以把useEffect Hook看做如下三个函数的组合：
      • componentDidMount()
      • componentDidupdate()
      • componentWillUnmount()
5. Ref Hook
   1. Ref Hook可以在函数组件中存储/查找组件内的标签或任意其他数据
   2. 语法：const refContainer = useRef()
   3. 作用：保存标签对象，功能与React.createRef()一样

4. Fragment

1. 使用

<Fragment><Fragment> // 只能添加一个key属性
<></> // 空标签不能添加任何属性

2. 作用

可以不用必须有一个真是的DOM根标签了，相当于template

<Fragment key={1}>
  内部结构
</Fragment>
<>
  内部结构
</>

5. Context

1. 理解

一种组件间的通信方式，常用于【祖组件】与【后代组件】间通信

2. 使用

1. 创建context容器对象：
const XxxContext = React.createContext()
2. 渲染子组件时，外面包裹xxxContext.Provider,通过value属性给后代组件传递数据：
<XxxContext.Provider value={数据}>
  子组件
</XxxContext.Provider>

3. 后代组件读取数据：
   1. 第一种方式：适用于类组件

   static contextType = xxxContext // 声明接收context
   this.context // 读取context中的value数据
   

   2. 第二种方式：函数组件与类组件都可以

   <xxxContext.Consumer>
     {
       value => ( // value就是context中的value数据
         要显示的内容
       )
     }
   </xxxContext.Consumer>
   

注意：

在应用开发中一般不用context,一般都用它的封装react插件

6. 组件优化

1. component的两个问题
   1. 只要执行setState(),即便不改变状态数据，组件也会重新render()
   2. 只当前组件重新render(),就会自动重新render子组件， 即使子组件没有用到父组件的任何数据===>效率低
2. 效率高的做法

只有当组件的state或props数据发生改变时才重新render()

3. 原因
   Component中的shouldComponentUpdate()总是返回true
4. 解决
   1. 办法1：

   1. 重写shouldComponentUpdate()方法
      1. 比较新旧state或props数据，如果有变化才返回true,如果没有返回false

   2. 办法2：

   1. 使用PureComponent
      1. PureComponent重写了shouldComponentUpdate(),只有state或props数据有变化才返回true
         注意：
      2. PureComponent内部只是进行setState或props数据的浅比较，如果只是数据对象内部数据变了，setState不要使用堆里的同一对象，始终返回false
         不要直接修改state数据，而是要产生新数据

   项目中一般使用PureComponent来优化

   import React, {PureComponent} from 'react'
   export default class Parent extebds PureComponent ()
   

7. render props

1. 如何向组件内部动态传入带内容的结构（标签）？

1. Vue中：
   1. 使用slot技术，也就是通过组件标签体传入结构<A><B/></A>
2. react中：
   1. 使用Children props: 通过组件标签体传入结构
   2. 使用render props: 通过组件标签属性传入结构，而且可以携带数据，一般用render函数属性

2. Children props

<A>
  <B>xxx</B>
</A>
{this.props.children}
问题：如果B组件需要A组件内的数据 --- 做不到

3. render props

<A render={(data) => <C data={data} ></C>}></A>
A组件：{this.props.render(内部state数据)}
C组件：读取A组件传入的数据显示，{this.props.data}

8. 错误边界

1. 理解：

错误边界(Error boundary): 用来捕获后代组件错误，渲染出备用页面

2. 特点：

只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件合成事件、定时器中产生的错误

3. 使用方式：

getDerivedStateFromError配合componentDidCatch

state = {
  hasError: '' // 用于标识子组件是否产生错误
}
// 生命周期函数，写在父组件中，一旦后代组件报错，就会触发
static getDrivedStateFromError(error){
  console.log(error)
  // 在render之前触发
  // 返回新的state
  return {
    hasError: true
  }
}

componentDidCatch(error, info){
  // 统计页面的错误，发送请求发送到后台去
  console.log(error, info)
}

render(){
  return (
    <div>
    {this.hasError ? <h2>子组件有错误</h2> : <Child />}
    </div>
  )
}

4. 注意

适用于生产环境，开发环境产出错误边界，稍后还会运行

9. 组件通信方式总结

1. 组件间的关系：

• 父子组件
• 兄弟组件（非嵌套组件）
• 祖孙组件（跨级组件）

2. 几种通信方式：

1. props:
  1. children props
  2. render props
2. 消息订阅-发布
  pub_sub、event等等
3. 集中式管理
  redux、dva等等
4. conText
  生产者-消费者模式

3. 比较好的搭配方式：

父子组件： props
兄弟组件：消息订阅-发布、集中式管理
祖孙组件（跨级组件）：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)