反应重新呈现
我以为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也会修改每个单元格。
我的推理有什么问题,如何改进它以仅重新加载编辑单元格?
回答如下:请确保在key
元素上添加适当的<ScheduleCell/>
属性。没有这个,React将不会关联在重新渲染时应该重用相同的组件实例。任何渲染<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
仅记住输出在组件实例的上下文中。有关如何工作的更多信息,请阅读React的Reconciliation。
更多推荐
反应重新呈现
发布评论