React Hooks
1. 使用hooks
理由
- 高阶组件为了复用,导致代码层级复杂
- 生命周期的复杂
2. useState
(保存组件状态)
const [state, setstate] = useState(initialState)
3. useEffect
(处理副作用)和useLayoutEffect
(同步执行副作用)
- 使用方式:
useEffect(() => {// effectreturn () => {// cleanup};
}[依赖的状态;空数组,表示不依赖])
- 说明:
- 不传入依赖:对比
componentDidMount
生命周期,表示初始加载完后执行 - 传入依赖:对比
componentDidMount
和componentDidUpdate
生命周期,表示加载完后和更新完成后执行 - 回调函数内
return
函数,对比componentWillUnmount
销毁生命周期
- 示例:
useEffect(()=>{const timer = setInterval(()=>{console.log('这是定时器')}, 1000)return ()=>{console.log('componentWillUnmount销毁时触发')clearInterval(timer)}
},[name])
useEffect
和useLayoutEffect
区别:
简单来说就是调用时机不同,useLayoutEffect
和原来componentDidMount & componentDidUpdate
一致,在react
完成DOM
更新后马上同步调用代码,会阻塞页面渲染。useEffect
则是在整个页面渲染完才会调用代码
官方优先建议使用useEffect
在实际使用时如果想避免页面抖动(在useEffect
里修改DOM
很有可能出现)的话,可以把需要操作的DOM
的代码放在useLayoutEffect
里,在这里做DOM
操作,这些DOM
修改会和react
做出的更改一起被一次性渲染到屏幕上,只有一次回流、重绘的代价
4. useCallBack
(记忆函数)
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用,只有第二个参数变化了,才重新声明一次
var handleClick = useCallback(()=>{console.log(name)
},[name])<button onClick={()=>handleClick()}>点击</button>// 只有name改变后,这个函数才会重新声明一次
// 如果传入空数组,那么就是第一次创建被缓存,如果name后期改变了,拿到的还是老name
// 如果传第二个参数,每次都会重新声明一次,拿到的就是最新的name
5. useMemo
(记忆组件)(可以理解为Vue
的计算属性)
useCallBack
的功能完全可以由useMemo
所取代,如果你想通过使用useMemo
返回一个记忆函数也是完全可以的。
useCallback(fn, inputs) is equivalent to useMemo(()=> fn, inputs)
唯一的区别是:useCallback
不会执行第一个参数函数,而是将它返回给你,而useMemo
会执行第一个函数并将函数执行结果返回给你。所以在前面的例子中,可以返回handleClick
来达到存储函数的目的。
所以useCallback
常用记忆事件函数,生成记忆后的事件函数并传递给子组件使用。而useMemo
更适合经过函数计算得到一个确定的值,比如记忆组件。
const getFilterList = useMemo(()=> list.filter(item => item.name.toUpperCase().includes(text.toUpperCase())),[list, text] // 如果list和text变化)
6. useRef
(保存引用值)
- 设置
ref
属性值
const myRef = useRef(null)
<Child ref={myRef}/>
- 用于缓存一个变量值
const [name, setName] = useState('zhangsan')
var mycount = useRef(0)
<button onClick={()=>{setName('lisi')mycount.current++
}}>点击</button>
{name}-{mycount}
7. useReducer
和useContext
(减少组件层级)
useContext
用于组件通信,接收父组件传入的值
// 父组件
import React from 'react'
var GlobalContext = React.createContext()function App(){<GlobalContext.Provider value={{name: '张三',age: 20,changeAge: (value) => {setAge(value)}}}><Child /></GlobalContext.Provider>
}// 子组件内
function Child(){const text = useContext(GlobalContext)
}
useReducer
:实现Redux
中reducer
的功能,应用在组件通信中
const reducer = (prevState, action)=>{const newState = { ...prevState }switch(action.type){case 'add':newState.count ++return newStatecase 'minus':newState.count -- return newStatedefault:return prevState}
}
const initialState = {count: 0
}
// FC中const [state, dispatch] = useReducer(reducer, initialState)<button onClick={()=>{dispatch({type: 'minus'})}}>-</button>{state.count}<button onClick={()=>{dispatch({type: 'add'})}}>+</button>
8. 自定义hooks
当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中。
必须以use
开头吗?必须如此。这个约定非常重要。不遵循的话,由于无法判断某个函数是否包含其内部Hook
的调用,React
将无法自动检查你的Hook
是否违反了Hook
的规则