快速上手哦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保证值不会反复修改