笔记16React-Hooks使用总结

React-Hooks使用总结

React-Hooks简介：react-Hooks是从v16.8引入的新特性。
用以使用函数组件，给予原本没有state、this、生命周期的函数组件以状态、生命周期等功能。
并且推广使用声明式的一种新特性。

hooks带来的改变:
1、声明式：所有声明写在函数开头
2、所有组件都可以是函数组件：更简洁的组件带来性能提升，
且React.memo给予shouldComponentUpdate功能
3、hook给予函数组件状态和声明周期，简化app.js代码冗余嵌套问题
4、原本同块功能的代码逻辑被拆分在不同生命周期，而hook对其进行聚合

React-Hooks主要特性

1、useState：用于保存组件状态，函数组件中没有类组件的this.state，而hooks
通过： const [data,setData]=useState({initialData})来定义状态


2、useEffect处理副作用，模拟生命周期：例如处理异步操作后续步骤如
componentWillUnmount中删除定时器等。useEffect的第一个参数中，我们可以设
置一个回调函数，用于在每次Dom重渲染后执行这个回调；第二个参数我们可以设置
一个空[],这样可以代替在componentDidMount和componentWillUnmount后回调；


3、useContext可以构建以组件为范围的小型redux。解决嵌套的组件传值，调用时
引用context来使用。

useContext使用实践

    ①Context区域：作为其他组件引入的渠道
      import {createContext} from 'react'
      const context = createContext()
      export default context
    ②State区域：封装了状态和方法，类似redux中的action和store的结合：
      1、向外暴露一个state模块（组件可以获取经由Reducer 的最新状态)
      2、引入、关联Context和Reducer,声明初始状态initial_State
      3、const [state,dispatch] = useReducer,关联并获取Reducer
      4、声明方法，状态的改变都需要通过dispatch进行触发，提交到Reducer并返回
      5、返回一个Provider，结合{props.children}回调渲染子组件，用以包裹子路由
        示例：
        const searchUser = async text =>{
          setLoading()
          const res = await axios.get('API',{text})
          dispatch({
            type:AAA, payload:res.data
          })
        } 
        //返回一个Provider
        return ({props.children}
                )
    ③Reducer区域：返回最新的state状态,
      1、引入type类型
      2、向外暴露Reducer
      如：
        switch (action.type){
          case A:return{...state,a:action.payload}
          case B:return{...state,loading:true}
          default:state
        }        
    ④组件中引入useContext：直接引入
      const user = userContext(User)
      const {...} = user.data
      user.func('aaa')等等；