为了账号安全,请及时绑定邮箱和手机立即绑定

React 重新渲染 - 误解

React 重新渲染 - 误解

浮云间 2022-08-18 10:55:43
我以为 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 修改了每个单元格,即使我只更改了一个单元格。我的推理有什么问题,如何改进它以仅重新加载编辑单元格?
查看完整描述

1 回答

?
慕村225694

TA贡献1880条经验 获得超4个赞

确保为元素添加适当的道具。没有这个,React 就不会关联相同的组件实例在重新渲染时应该被重用。对于渲染的任何内容也是如此。key<ScheduleCell/><ScheduleRow/>


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

    return (

        <tr>

            <th className="text-center">{ props.no }</th> // number of row - doesn't matter

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

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

            )}) }

        </tr>

    )

})

React.memo仅当 props 与上次呈现该实例时相同时,才会在组件实例的上下文中记住输出。有关其工作原理的更多信息,请阅读 React 的和解。


查看完整回答
反对 回复 2022-08-18
  • 1 回答
  • 0 关注
  • 83 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信