Является ли установка состояния внутри функции рендеринга правильным решением?

Question

Я устанавливаю состояние внутри некоторых компонентов, которые находятся внутри render (), и мне интересно, является ли это хорошим способом установки состояния:

<TextInput style={{ fontSize: 14, marginLeft: 10, marginRight: 10, color: 'black', borderColor: 'gray', borderWidth: 1, textAlignVertical: 'top' }}
                    onChangeText={(txt) => this.setState({ waitReason: txt })}
                    autoFocus
                    multiline={true}
                    numberOfLines={3}
                    placeholderTextColor='gray'
                    placeholder='Comment'
                    value={this.state.waitReason} />

Или, возможно, вызов функции и затем установка состояния внутри этой функции может быть лучшее решение?!

Answer 1

setState внутри render не имеет проблем, но для поддержания стандартного кода следует использовать такие функции, как handleChange или функции щелчка, когда необходимо установить состояние для определенного события.

Answer 2

Помните, что вы не устанавливаете состояние внутри реального рендера. Вы визуализируете компонент и устанавливаете состояние в обработчике событий. Таким образом, в вашем коде повторное рендеринг выполняется только при вызове обработчика onChangeText, то есть только при изменении текста.

Ваш подход должен быть в порядке. Разделение на другую функцию не изменит производительность кода, но может сделать его более понятным.

Ваш подход в значительной степени используется в качестве примера в документации React Native сам.

Answer 3

Да, это нормально для setState в рендере, особенно когда речь идет о пользовательском вводе. как в оригинальной документации