当前位置：首页 > news >正文

React学习计划-react-hooks补充

news 2025/9/15 12:43:27

`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>