React ref，当使用多个 ref 时，所有子组件都会重新渲染

如何解决React ref，当使用多个 ref 时，所有子组件都会重新渲染

我正在制作一个修改 db 值的页面。

当最初呈现屏幕时，从服务器接收一个值并将该值放入标记中。

喜欢这个 rendered first page image

当你点击添加按钮时，一行被删除，当你点击应用按钮时， 仅将修改后的值发送到服务器。

我想要做的是点击添加按钮，点击应用按钮，如果该行为空，我会专注于该行

首先，该功能运行良好。但是我想知道它下面的所有孩子都重新渲染是否正常

红色方块是重新渲染所有子组件的部分。

It's the profiler when i hit the delete button

Table.js

function Tables({}){
  const rows = useSelector( state =>state.phoneData.data.rows);

  const refs = useMemo( ()=> new Array(rows.length).fill().map(()=>new Array(8).fill().map(()=>createRef())),[rows.length]);

  return(
      <StyledTable>
          <Row key={`top_row_head`} top />
          {rows.map( (row,i) =>
              <Row  ref={refs[i]} key={`row_body_${row.id}`} rowId={row.id}/>
          )}
      </StyledTable>
  );
}

Row.js

const Row = forwardRef(({top,rowId,children},ref) =>{
    console.log("row");
    const dispatch = usedispatch();

    const handleDeleteButton = useCallback( (id) => {
            dispatch(phoneDataUpdate.Delete(id));
    },[]);

    if( top ) return(
        <StyledRow>
            <DeleteButton top/>
            {columns.map((column)=>
                <Column  key={`head_${column.name}`} width={column.width} top>
                    {column.name}
                </Column>
            )}
        </StyledRow>

    );
    return( 
        <StyledRow >
            <DeleteButton onClick={()=>handleDeleteButton(rowId)}> delete </DeleteButton>
            {columns.map((column,index)=>
                <Column key={`row_${rowId}_${column.name}`} width={column.width} textalign={column.textalign}>
                    <Input ref={ref[index]} colIndex={index} id={rowId} column={column} />
                </Column>   
            )}
        </StyledRow>
    );
});

Reducer.js

const PHONE_DATA = 'phoneData/PHONE_DATA';
const PHONE_DATA_LOADING = 'phoneData/PHONE_DATA_LOADING';
const PHONE_DATA_SUCCESS = 'phoneData/PHONE_DATA_SUCCESS';
const PHONE_DATA_ERROR = 'phoneData/PHONE_DATA_ERROR';
const PHONE_DATA_ADD = 'phoneData/PHONE_DATA_ADD';
const PHONE_DATA_DELETE = 'phoneData/PHONE_DATA_DELETE';
const PHONE_DATA_CHANGE = 'phoneData/PHONE_DATA_CHANGE';
const PHONE_DATA_UPDATE_LIST_CHANGE = 'phoneData/PHONE_DATA_UPDATE_LIST_CHANGE';
const PHONE_DATA_UPDATE_LIST_DELETE = 'phoneData/PHONE_DATA_UPDATE_LIST_DELETE';

const dataInitRow = {
    id:null,model_name:null,machine_name:null,shipping_price:null,maker:null,created:null,battery:null,screen_size:null,storage:null,};

const dataInit = {
    lastId:null,rows:[],}

const initialState = {
    state:{
        loading:false,error:false,},data:dataInit,// refData:[],firstData:dataInit,datachangelist:{
        dataAddList:[],dataDeleteList:[],dataUpdateList:[],};



// get Data From Server promisethunk
const phoneDataFetchAsync = createPromiseThunk(PHONE_DATA,restAPI.getAllPhoneInfo);

const phoneDataUpdate =({
    Add:()=>({
        type:PHONE_DATA_ADD,}),Delete:(id)=>({
        type:PHONE_DATA_DELETE,id: id,Change:(id,colName,value)=>({
        type:PHONE_DATA_CHANGE,colName:colName,value: value,});
// const phoneDataAddRef=(length) =>({
//     type:PHONE_DATA_ADD_REF,//     length,// });

const phoneDataUpdateList = ({
    Change:(id,value) => ({
        type:PHONE_DATA_UPDATE_LIST_CHANGE,colName: colName,Delete:(id,colName) => ({
        type:PHONE_DATA_UPDATE_LIST_DELETE,});

////////////////////////////////////////////////////////

export default function phoneData(state = initialState,action){
    // console.log(`add: ${state.datachangelist.dataAddList},delete: ${state.datachangelist.dataDeleteList},change: ${state.datachangelist.dataUpdateList}`);
    switch(action.type){
        case PHONE_DATA_LOADING:
        case PHONE_DATA_SUCCESS:
        case PHONE_DATA_ERROR:
            return handleAsyncActions(PHONE_DATA)(state,action);
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////
        case PHONE_DATA_ADD:
            return{
                ...state,data:{
                    ...state.data,lastId: state.data.lastId +1,rows: state.data.rows.concat({
                        ...dataInitRow,id: state.data.lastId +1,datachangelist:{
                    ...state.datachangelist,dataAddList: state.datachangelist.dataAddList.concat( state.data.lastId +1),}
            };
        case PHONE_DATA_DELETE:
            const dataAddListIdx = state.datachangelist.dataAddList.findindex( val => val === action.id);
            console.log("deleteRow",action);
            return{
                ...state,// refData:state.refData.filter(row => row.id !== action.id),rows:state.data.rows.filter(row => row.id !== action.id),dataAddList: dataAddListIdx === -1
                                 ? state.datachangelist.dataAddList
                                 : state.datachangelist.dataAddList.filter(id => id !== action.id),dataDeleteList: dataAddListIdx === -1
                                 ? state.datachangelist.dataDeleteList.concat(action.id)
                                 : state.datachangelist.dataDeleteList,};
      ////////////////////////////////////////////////////////////////////////////////////////////////////////////
        case PHONE_DATA_UPDATE_LIST_CHANGE:
            return produce(state,draft =>{
                const idx = state.datachangelist.dataUpdateList.findindex( row => row.id === action.id);

                if( idx === -1 ){
                    let initRow = {};
                    initRow.id = action.id;
                    initRow[action.colName] = action.value;
                    draft.datachangelist.dataUpdateList.push(initRow);

                }else if( action.value !== state.datachangelist.dataUpdateList[idx][action.colName]){
                    draft.datachangelist.dataUpdateList[idx][action.colName] = action.value;
                }

            });
        case PHONE_DATA_UPDATE_LIST_DELETE:
            return produce(state,draft=>{
                const idx = state.datachangelist.dataUpdateList.findindex( row => row.id === action.id);
                if( idx !== -1){
                    if( Object.keys(draft.datachangelist.dataUpdateList[idx]).length <= 1  ){
                        draft.datachangelist.dataUpdateList.splice(idx,1);
                    }
                }
            });
        default:
            return state;
    }
}




export {phoneDataFetchAsync,phoneDataUpdate,phoneDataUpdateList,};