> 文章列表 > 快速上手哦Hooks

快速上手哦Hooks

快速上手哦Hooks

Hooks是一个新的React特性提案,组件尽量写成纯函数,如果需要外部React特性(比如状态管理,生命周期),就用钩子把外部特性"钩"进来,通常函数名字都是以use开头。首次在v16.7.0-alphacompenentDidUpdate版本中添加,在v16.8.0中正式发布

背景

       跨组件复用stateful logic十分困难 使用Hooks,你可以在将含有state的逻辑从组件中抽象出来,这将可以让这些逻辑容易被测试。同时,Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑

复杂的组件难以理解 Hooks允许您根据相关部分(例如设置订阅或获取数据)将一个组件分割成更小的函数,而不是强制基于生命周期方法进行分割

不止是用户,机器也对Classes难以理解 Hooks让你可以在classes之外使用更多React的新特性

常用的hooks

useState 定义数据

             let [count, setCount] = useState(100);

      

useEffect  模拟生命周期函数

              useEffect(()=>{

                  return ()=>{

}

}, [ ])

模拟componentDidMount /compenentDidUpdate  -   useEffect

模拟componentDidMount  -  useEffect 依赖 [ ]

模拟compenentDidUpdate - useEffect 无依赖 ,或者 依赖 [a,b,c]

模拟componentWillUnMount - useEffect 中返回一个函数

useContext  直接获取祖先元素通过createContext创建的context

useReducer

const [state, dispatch] = useReducer(reducer, initialState, init);

优化组件:

memo 在子组件不需要父组件值和函数的情况下,使用memo包裹即可

useMemo 如果是函数作为props,可以使用useCallback保证不会反复修改

useCallback 如果是值作为props,可以使用useMemo保证值不会反复修改

安陆市