共计 1584 个字符，预计需要花费 4 分钟才能阅读完成。
About Hooks
Hook 就是 JavaScript 函数，然而应用它们会有两个额定的规定：
- 只能在 函数最外层 调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件 中调用 Hook。不要在其余 JavaScript 函数中调用。
useState
1. 模式
import React,{useState} from 'React'
let [num,setNum]=useState(0)useState 接管一个参数作为初始值，返回一个数组。
- 数组第一项是状态值
- 数组第二项是扭转状态值的函数
2. 应用办法
<button onClick={()=>{setNum(n+1)}}>+1</button>3. 多项状态值应用 useState 注意事项
let [a,setA] = useState(0)
let [b,setB] = useState('B')
let [c,setC] = useState(1)- 没有申明 key，那么如何将 useState 和每个状态值对应起来呢？
- React 是依据多个 useState 的申明程序来确定 useState 对应的状态值的。换句话说，在进行调用 useState()API 时，肯定不能应用判断语句等可能扭转其程序的逻辑，否则会报错。
- 对象类型不反对部分更新
如果 state 是一个对象，setState 不会帮忙咱们部分更新 state。正确的形式是 setState({…state, n: 1}) - setState 承受函数
setState(i=>i+1)
useEffect
1. 模式
useEffect(() => {doSomething},[]);-
参数
- 第一个参数接管一个函数，在对应的生命周期执行。
- 第二个参数承受一个数组，当数组中的状态值发生变化时调用 useEffect。
- 返回值：返回一个函数，React 将会在执行革除操作时调用它。
2. 原理阐明
useEffect 在 第一次渲染之后 和 每次更新之后 都会执行（在 渲染之前 执行能够应用useLayoutEffect）。你可能会更容易接受 effect 产生在“渲染之后”这种概念，不必再去思考“挂载 mount”还是“更新 update”。
3. 比照 class
// 挂载（第一次渲染
componentDidMount => useEffect(()=>{...},[])
// 更新
componentDidUpdate => useEffect(()=>{...},[props])
// 清理
componentWillUnmount => useEffect(()=>{ return()=>{console.log('cleanUp') } })useMemo、useCallback、React.memo
参考：https://juejin.cn/post/684490…
应用办法：
const App = () => {const handleClick = useCallback(()=> console.log('click'),[])
let user = useMemo(()=>({ name: 'oliver'}),[])
return (<Child onClick={handleClick} user={user} />
)
}
const Child = React.memo(()=>{
return (<div>child</div>)
})额定阐明：
useMemo(()=>fn,[...depds])
// 等价于
useCallbacl(fn,[...depds])总结：
不要自觉应用这些 hooks 进行性能优化
- 在子组件不须要父组件的值和函数的状况下，只须要应用 memo 函数包裹子组件即可。
- 在应用函数的状况，须要思考有没有函数传递给子组件应用 useCallback。
- 在值有所依赖的项，并且是对象和数组等值的时候而应用 useMemo（当返回的是原始数据类型如字符串、数字、布尔值，就不要应用 useMemo 了）。
正文完