Реакция ловушки useState: передача установщика дочернему функциональному обновлению, обратному вызову и использованию обратного вызова - PullRequest
0 голосов
/ 21 апреля 2020

У меня есть несколько вопросов, связанных друг с другом относительно ловушек React: useState и useCallback.


  1. Когда именно требуется функциональное обновление ?

1.1. Если функция установки получает функцию, ее аргумент ВСЕГДА будет предыдущим состоянием?


Если я хочу обновить родительское состояние дочернего компонента, как я должен передать установщик дочернему элементу, обернуть его в другую функцию в качестве обратного вызова, как объяснено здесь ? просто передайте его прямо как предложено здесь ?

2.1. Каковы причины и преимущества / недостатки каждого подхода?


Если я могу просто передать его напрямую и использую памятку, требуется ли использовать обратный вызов, как объяснено здесь ?
Если я хочу использовать самые последние данные о состоянии при обновлении родительского состояния от ребенка, как мне это сделать?

4.1. Полезно ли в этом случае передавать обратный вызов ребенку?

1 Ответ

0 голосов
/ 22 апреля 2020

1. Когда именно требуется функциональное обновление?

Вам может потребоваться обновить любое состояние вашего компонента. Например, вы получаете пользователя с сервера через API, и вам нужно сохранить этого пользователя в вашем компоненте. Для этого вам нужно использовать состояние для хранения этого пользовательского объекта. Вот пример:

const [user, setUser] = useState({}); // declaration

let newUser = u; // u is coming from api
setUser(newUser);

1.1. Если функция установки получает функцию, ее аргумент ВСЕГДА будет предыдущим состоянием?

Да. Функция setter, как setState, используется в компоненте класса. Вот пример только обновления поля состояния:

this.setState({username: 'khabir'});

здесь вы обновляете состояние, используя предыдущее состояние:

this.setState(prevState =>{
   return{
        counter : prevState.counter +1
   }
})

2. Если я хочу обновить родительское состояние дочернего компонента, как я должен передать установщик дочернему элементу, обернуть его в другую функцию в качестве обратного вызова, как объяснено здесь ? просто передайте его прямо как предложено здесь ?

Оба примера одинаковы. Вы можете использовать любого.

3. Если я могу просто передать его напрямую и использую memo, требуется ли useCallback, как описано здесь?

Если вы передаете какую-либо ссылку на функцию на дочерний компонент из родительского компонента, она создается при каждом рендеринге of Parent и, следовательно, prevProps и props больше не являются одинаковыми, даже если они и есть.

Чтобы применить памятку, мы должны убедиться, что ссылка на функцию не создается излишне при каждом рендере Parent. Вот почему useCallback используется. Пожалуйста, прочитайте эту статью полностью для лучшего понимания.

4. Если я хочу использовать самые последние данные о состоянии при обновлении родительского состояния от дочернего, как мне это сделать?

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

4.1. Полезно ли в этом случае передавать обратный вызов ребенку?

Да, как я уже сказал в ответе на вопрос № 4.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...