Избегайте государственных изменений в действии коренных - это кошерная?

Question

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

Мы обошли это двумя способами, и мне было интересно, насколько эти методы кошерны против хаков.

Прямое манипулирование и наборNativeProps - Мы часто использовали setNativeProps, что мы создали инфраструктуру, подобную Redux; однако вместо изменения состояния он использует setNativeProps для скорости. Целью этого было расширение setNativeProps вне его использования исключительно внутри компонента; однако мы по-прежнему используем изменения состояния, когда это возможно.

Scrollview и TextInput - Нам удалось повернуть и сориентировать Scrollviews и TextInputs таким образом, чтобы работать с setNativeProps, так что перетаскивание контента является более гладким и роднее, и текст может быть изменен быстрее, чем изменение состояния позволит.

Нам было интересно, как кошерный все это, как Реагировать Родной сайт только отмечает ее сложность:

setNativeProps является обязательным и сохраняет состояние в родном слое (DOM, UIView и т.д.), а не в ваших компонентах React, что затрудняет ваш код.

Следует ли переделать наше приложение?

Answer 1

Вызов setNativeProps не рекомендуется, но я не считаю его массивным красным флагом, если он позволяет вам достичь желаемого качества. Как предупреждает docs, это делает ваш код сложнее рассуждать, поскольку он устанавливает состояние в ваших собственных представлениях, которое не входит в вашу иерархию компонентов React.

Два способа приручить эту сложность должны уменьшить количество различных фрагментов кода, которые можно установить с помощью реквизита JSX или setNativeProps на данном компоненте, и постепенно переходить от setNativeProps и уменьшить рендеринг с shouldComponentUpdate и PureComponent вместо этого.

Неизменяемые структуры данных упрощают реализацию shouldComponentUpdate, а также Reselect селекторов, если вы используете Redux. Если ваши часто отображаемые компоненты имеют методы render(), которые создают множество элементов, группы рефакторинга этих элементов выходят в чистые компоненты, которые необязательно должны отображаться так часто. constant elements Babel transform удалит большую часть стоимости элементов, которые никогда не меняются, создавая их только один раз; когда React видит один и тот же элемент через два последовательных прохода render(), он не будет повторно отображать элемент во второй раз.