React 重新渲染 - 误解

Question

我以为 React 只是在重新加载我需要的东西 - 在我的情况下，它看起来不同，或者我做错了什么。

我有员工表。对于一天内的每个员工，我可以设置工作时间的开始和结束时间。喜欢这个：

const ScheduleRow = React.memo((props) => {

    return (

        <tr>

            // number of row - doesn't matter

            <th className="text-center">{ props.no }</th>

            { ["2020-01-01", "2020-01-02", "2020-01-03", "2020-01-04" /* etc */ ].map(

                date => { return (

                    <ScheduleCell date={ date } employee_id={ props.employee_id }/>

                )}) }

        </tr>

    )

})

const ScheduleCell = React.memo((props) => {

    const dispatch = useDispatch()

    let schedule_id = `${props.employee_id}:${props.date}`

    const schedule = useSelector(state => state.schedules)[schedule_id] || null

    /* some code here - not changing state */

    console.log(props.date)

    return (

        <td>

            <Form.Control type="text" value={schedule?.begin}

                onChange={(e) => dispatch({

                    type: "EDIT_SCHEDULE",

                    schedule_id: schedule_id,

                    property: "begin",

                    value: e.target.value

                })}/>

            <Form.Control type="text" value={schedule?.cease}

                onChange={(e) => dispatch({

                    type: "EDIT_SCHEDULE",

                    schedule_id: schedule_id,

                    property: "cease",

                    value: e.target.value

                })}/>

        </td>

    )

});

你可以看到我在 ScheduleCell 中有 console.log（） 在返回正在编辑的打印日期之前。我相信，当我更改单元格（例如日期“2020-01-02”）时，我应该在控制台中只看到“2020-01-02”。但是我在 ScheduleRow 中看到数组中的每个日期，这意味着 React 修改了每个单元格，即使我只更改了一个单元格。

我的推理有什么问题，如何改进它以仅重新加载编辑单元格？

Answer 1

确保为元素添加适当的道具。没有这个，React 就不会关联相同的组件实例在重新渲染时应该被重用。对于渲染的任何内容也是如此。key<ScheduleCell/><ScheduleRow/>const ScheduleRow = React.memo((props) => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th className="text-center">{ props.no }</th> // number of row - doesn't matter&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { ["2020-01-01", "2020-01-02", "2020-01-03", "2020-01-04" /* etc */ ].map(date => { return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ScheduleCell key={ date } date={ date } employee_id={ props.employee_id }/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}) }&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; )})React.memo仅当 props 与上次呈现该实例时相同时，才会在组件实例的上下文中记住输出。有关其工作原理的更多信息，请阅读 React 的和解。