Блог

Эти вещи с реакцией сводят меня с ума, я не помню, чтобы у меня давно были эти проблемы с компонентами класса, когда я работал над react native. Должно быть, я что-то здесь делаю не так, это одна из моих проблем, у меня есть еще один компонент, у которого также есть аналогичная проблема. Я новичок в новой системе крючков, даже читая о некоторых вещах, которые мне все еще не очень понятны.

У меня возникли некоторые проблемы с локальными состояниями и состояниями восстановления, из-за которых мой диалог мерцает. Каждый раз, когда родительский компонент устанавливал состояние журнала в этом цикле, диалоговое окно закрывалось и открывалось. (так что в этом случае 100 раз в зависимости от длины петли) Он перерисовывается каждый раз, когда обновляется состояние.

библиотеки реагируют/redux/redux-thunk/материал-пользовательский интерфейс

Пример Кода

 function ToolbarModal(props){
 const [progressLog, setProgressLog] = useState("");

 const openProgressDialog = useSelector(getOpenProgressDialog);
 const handleCloseLongProgressDialog = () => {
   dispatch(handleOpenBatchRouteProgressDialog(false))
 }

 const handleSomeLogic = () => {
  for(let i=0; i<0; i  ){
    //The real one is concated with prev message
   setProgressLog("SAMPLE MESSAGE")
  }
 }

 return (
  <div>
   <LongProgressDialog
     open={openProgressDialog}
     onClose={handleCloseLongProgressDialog}
     onEntered={handleSomeLogic}
     log={progressLog}
   />
  </div>
 )
}
 

Опора журнала передается дочернему компоненту с помощью диалогового компонента material-ui и просто отображается в текстовом поле.

 function LongProgressDialog(props){
    const {open, onClose, onEntered, log} = props

    return (
        <Dialog
            open={open}
            onClose={onClose}
            onEntered={onEntered}
            maxWidth='sm'
            fullWidth
        >
            <DialogTitle>Long Progress</DialogTitle>
            <DialogContent>
                <TextField 
                 multiline
                 fullWidth
                 rows={10}
                 rowsMax={10}
                 variant='outlined'
                 disabled
                 value={log}
                 />
            </DialogContent>
        </Dialog>
    )
}
 

Я думаю, что вы хотите использовать useRef:

 import { useRef } from 'react'

const Component = props => {

  const logRef = useRef()
  const handleSomeLogic = () => {
  for(let i=0; i<100; i  ){
    logRef.current = "SAMPLE MESSAGE"
  }
 }
}
 

Затем передайте ссылку дочернему компоненту:

  <LongProgressDialog
     open={openProgressDialog}
     onClose={handleCloseLongProgressDialog}
     onEntered={handleSomeLogic}
     log={logRef.current}
   />
 

И в вашем детском компоненте:

 const LongProgressDialog = ({open, onClose, onEntered, log}) => {

  ...
  return (
      <p> Log value is: {log} </p>
     
   )
}
 

Однако,

Обратите внимание, что, поскольку компонент не будет повторно отрисован, вы не увидите обновлений в дочернем элементе, если компонент не будет отрисован. Таким образом, вы должны решить, исходя из вашего случая, следует ли вам обновить состояние или обновить ссылку и затем выполнить повторную визуализацию. Вы можете проверить пример codesandbox здесь.

Каждый раз, когда ссылка на объект, который вы передаете как свойство, изменяется, FC (функциональный компонент) будет повторно отображаться. Таким образом, чтобы предотвратить это, передаваемые вами реквизиты должны иметь одну и ту же ссылку при каждом повторном рендеринге.

Позвольте мне объяснить более подробно:

Например, здесь:

 const handleSomeLogic = () => {
//...
 

вы создаете новую функцию каждый раз, когда FC перерисовывается (что происходит при обновлении состояния).

Вы можете запомнить эту функцию с useCallback помощью .

Функции, объекты (и массивы) меняют свое значение каждый раз, когда вы их создаете, поэтому:

 const function1 = () => {}
const function2 = () => {}
function1 === function2 // false

const emptyObj = {}
const emptyObj2 = {}
emptyObj === emptyObj2 // false

// ... etc
 

Для того чтобы запомнить значения, вы должны использовать useMemo крючок.

Итак, в качестве решения: оберните все свои функции useCallback . Примечание: Я вижу, что вы передаете значение прогресса LongProgressDialog компоненту, поэтому технически каждый раз, когда вы обновляете прогресс LongProgressDialog , компонент будет повторно отображаться.

В дополнение к этому вы должны обернуть свой компонент React.memo . Когда родитель повторно визуализирует, ребенок тоже будет повторно визуализировать. React.memo предотвращает это и будет повторно отображать компонент только в том случае, если один из его реквизитов был изменен.

Выяснение того, какая опора вызывает проблему

Чтобы выяснить, какая опора, которую вы передаете, вызывает повторную визуализацию, вы можете сравнить ссылки на переданные опоры в вашем компоненте, в вашем случае в LongProgressDialog компоненте.

Так, например:

 // create variables outside of the FC in which we will store the reference
let prop1Ref;
let prop2Ref;

const LongProgressDialog = ({ prop1, prop2 }) => {

  // for each prop, use a effect which will be called when the prop's value/reference changes
  useEffect(() => {
    // compare the values by reference
    if (prop1Ref !== prop1) {
      // when prop ref has a value, the reference must have been changed:
      if(prop1Ref != null) {
        console.log("The reference of prop1 has changed. Memorize it properly");
      }
      prop1Ref = prop1;
    }
  }, [prop1])


}
 

Вы можете скопировать логику и применить ее ко всем вашим реквизитам.
Если вы не хотите проверять это вручную, есть удобные библиотеки, такие как https://github.com/welldone-software/why-did-you-render

гу Минфэн ответил на него в своем комментарии. Просто используйте прямой реферат, исправил мою проблему, технически это то, что я искал все это время и не знал, что оно существует.

если кому-то это нужно, просто следуйте документу forward ref из документов react, и это очень просто.