如何使用useReducer([state，dispatch])和useContext避免无用的重新渲染

Question

当使用多个useReducer时，每个使用状态一部分的组件都会重新渲染。

import React, { useContext } from 'react'
import Store from '../store'
import { setName } from "../actions/nameActions"
const Name = () => {
    const { state: { nameReducer: { name } }, dispatch } = useContext(Store)
    const handleInput = ({ target: { value } }) => { dispatch(setName(value)) }
    console.log('useless rerender if other part (not name) of state is changed'); 
    return <div>
        <p>{name}</p>
        <input value={name} onChange={handleInput} />
    </div>
}
export default Name;

如何避免这种无用的重新渲染？

Answer 1

如果useState或useReducer状态发生变化，组件将更新，组件本身无法阻止这种情况。

在依赖于部分状态的子组件中，应防止重新渲染，例如，通过使其纯化：

const NameContainer = () => {
    const { state: { nameReducer: { name } }, dispatch } = useContext(Store)
    return <Name name={name} dispatch={dispatch}/>;
}
const Name = React.memo(({ name, dispatch }) => {
    const handleInput = ({ target: { value } }) => { dispatch(setName(value)) }
    return <div>
        <p>{name}</p>
        <input value={name} onChange={handleInput} />
    </div>
});

NameContainer可以重写为 HOC 并具有与 Redux connect 相同的目的，从存储中提取所需的属性并将它们映射到连接的组件 props。