Question

我建立了一个表格，其中每一列都是一个不同的组件，并且表格外部有一个切换按钮可以更改单个列的视图。单击切换按钮时，整个表将被重新呈现，而不仅仅是受影响的单个列。

切换组件

const ToggleWrapper = () => {
    const dispatch = useDispatch();
    const is1Click = useSelector(state => state.is1Click);

    return (
       <div className="toggle">
          <Toggle value={is1Click} onChange={value => dispatch(actions.set1Click(value))}/>
       </div>
    )
};

export default ToggleWrapper;

列组件

const TableColumns = props => {
    const instruments = useSelector(state => state.filteredInstruments);

    const rows = instruments.map((instrument, i) => {
        const row = [];
        props.columnTitles.forEach((title, i) => {
            switch (title.name) {
                case 'quickTrade':
                    row.push(<QuickTradeField/>);
                    break;
                case other cases...:
                .
                .
                .
            }
        });

        return <div className="marketItem" key={i}>{row}</div>;
    });

    return (
        <div>
            {rows}
        </div>
    );
};

export default TableColumns;

受影响的组件

const QuickTradeField = (props: Props) => {
    const is1Click = useSelector(state => state.is1Click);

    let input = is1Click ? <span className="size" /> : null;

    return (
        <div className="QuickTradeField">
            {input}
        </div>
    );
};

export default QuickTradeField;

当在Toggle组件中设置带有分发功能的is1Click时，我希望只有QuickTradeField组件才能重新呈现（因为这是使用is1Click的唯一位置）。但是，TableColumns组件中的整个instrument.map()函数将重新运行，因此所有其他不相关的列及其组件也将重新运行。如何确保仅重新渲染QuickTradeField？

谢谢！

反应redux导致不必要的重新渲染

0 个答案: