React Redux-在Change上非常慢

Question

我有一个员工表，里面有他们的数据。在最后一行下是一个只有输入才能添加新员工的另一个-我只需要设置名称，其他属性都是默认设置的，可以是更改字母。只有当我按下回车键时，输入才会调用调度。当数组中只有一个对象时，我的onChange处理程序花费了大约80ms，当有20个对象时相同的处理程序花费大约2000ms。这是怎么回事：

store/index.js:

const reducer = (state = {}, action) => {
return {
default: defaultReducer(state.default, action, state),
// [ 3 other reducers]
employees: employeesReducer(state.employees, action),
};
};
const store = createStore(reducer);

我不能使用combineReducers，因为我需要一个可以访问整个商店的reducer。此reducer(默认值(用于将存储保存/加载为json数据。然而，我的自定义联合收割机减速器并不是原因，因为我也尝试过在没有默认减速器的情况下使用普通的联合收割机。onChange在2000毫秒内仍然没有任何变化。

减员/雇员.js

const initialState = { }
let next_employee_id = 1;
const employeesReducer = (state = initialState, action) => {
switch (action.type) {
case 'EMPLOYEE_CREATE': {
return {
...state,
[ next_employee_id++ ]: {
signature: action.value,
time_contract: 1,
role: 'PRACOWNIK'
}
}
}
// [ other cases - update, remove etc ]
default:
return state
}

components/EmployeeManager.js(仅负责添加的部分(

<Form.Control 
type="text" 
size="sm" 
placeholder="ADD EMPLOYEE" 
onKeyDown={ (e) => { 
( e.key === 'Enter' ) ? 
( () => { 
dispatch({ type: 'EMPLOYEE_CREATE', value: e.target.value }); 
e.target.value = ""; 
})() : 
(() => {})() 
} 
}/>

这不是重新渲染错误。我检查了一下。一名员工重新渲染大约需要8毫秒，100名员工重新绘制大约需要10毫秒。

react版本：16.13.1

react redux版本：7.2.0

我也使用react引导程序(版本：1.0.1(，但我认为它没有任何影响。

---

第1版

在EmployeeManager组件中，我有来自react引导程序的Modal。当我点击员工行时，我可以在模式中编辑他。它看起来像这样：

const EmployeeManager = React.memo( () => {
const Schedule = React.memo(() => {
const [modalShow, setModalShow] = useState(false);
const [modalEmployeeKey, setModalEmployeeKey] = useState(0)
const dispatch = useDispatch();
const employees = useSelector( state => state.employees );
return ( <>
<Modal show={ modalShow } onHide={ () => setModalShow(false) } size="lg">
<Modal.Body>
<Container>
<Row className="show-grid align-items-center mb-2">
<Col sm={6} lg={8}> Dane personalne: </Col>
<Col sm={6} lg={4}>
<Form.Control type="text" value={ employees[ modalEmployeeKey ]?.signature } onChange={ (e) => dispatch({ type: 'EMPLOYEE_UPDATE', id: modalEmployeeKey, field: 'signature', value: e.target.value })}/>
</Col>
</Row>
{ /* other rows */ }
</Container>
</Modal.Body>
</Modal>
{ /* Other thinks */ }
</> )
})

可变员工如下所示：

{
1: { signature: "ADAM NOWAK", time_contract:1, /* etc. */ },
/* other */ 
}

如果我从组件中删除Modal，一切都会正常工作。怎么了？！

---

第2号编辑

如果我从组件中删除Modal，一切都会正常工作。

不完全是。。在大约60名员工再次放慢工作速度后：C

Answer 1

尝试备注组件。

function list({ props }){
return(
<>
{props.map((item)=>{
return <Item />
})}
</>
)
}
function Item memo((){
return
<></>
})