Question

使用多次useReducers时，使用部分状态的每个组件都会重新呈现。

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。

Answer 2

我没有运气尝试过您的解决方案...

我正在使用https://www.npmjs.com/package/@nickcoleman/use-combined-reducers中的use-combined-reducers。是否有可能每次都更新分派，以便每次都创建一个新函数...即使状态的其他部分发生变化，它也会重新创建分派，因为每次分派都不相同，因此会触发重新渲染？

我该如何解决？

如何避免使用useReducer（[state，dispatch]）和useContext进行无用的重新渲染？

2 个答案: