函数式组件
函数式组件中,没有 state 和 生命周期,所以又被称为 无状态组件,在早期 react 版本中,被当前纯渲染组件来用
Hook 使用规则
只在 React 函数中调用 Hook
- 只在函数组件调⽤Hooks,React Hooks目前只支持函数组件,所以⼤大家别在class组件或者普通的函数⾥面调⽤Hook钩⼦函数
- React Hooks的应用场景在函数组件,自定义hooks
- 只在顶层调⽤Hooks Hooks的调⽤,尽量只在顶层作⽤域进行调用不要在循环,条件或者是嵌套函数中调⽤Hook,否则可能会⽆无 ,确保每次组件渲染时都以相同的顺序调⽤Hook
- 所有的 hook 必须 以 use开头
// 开头必须是 use
function useSize(){
return {
w:window.innerWidth,
h:window.innerHeight
}
}
react hooks提供的api,大多都有记忆功能,例如
- useState
- useEffect
- useLayoutEffect
- useReducer
- useRef
- useMemo 记忆计算结果
- useCallback 记忆函数体
Hooks优势:
- 函数组件不能使用state,遇到交互更改状态等复杂逻辑时不能更好地支持,hooks让函数组件更靠近class组件,拥抱函数式编程。
- 解决副作⽤问题,hooks出现可以处理数据获取、订阅、定时执行任务、手动修改 ReactDOM这些⾏为副作用,进行副作用逻辑。比如useEffect。
- 更好写出有状态的逻辑重用组件。
- 让复杂逻辑简单化,比如状态管理:useReducer、useContext。
- 函数式组件比class组件简洁,开发的体验更好,效率更⾼,性能更好。
更容易发现无用的状态和函数。
常用 hook
- useState
const [state, setState] = useState(initialState);
- useEffect 类组件
componentDidMount、componentDidUpdate 和 componentWillUnmount
需要清除的副作用
// 挂载,更新,卸载三者合一
useEffect(()=>{
console.log("组件更新或者挂载");
return ()=>{
console.log("组件卸载")
}
},[age]);
// 分开写
useEffect(()=>{
return ()=>{
console.log("组件挂载")
}
},[]);
useEffect(()=>{
return ()=>{
console.log("组件更新")
}
},[]);
useEffect(()=>{
return ()=>{
console.log("组件卸载")
}
},[age]); //监听数据目标
- useRef