Государственное управление в React Native

Управление состоянием — одна из самых сложных концепций, которую нужно понять при изучении React Native, поскольку для этого существует множество способов. В реестре npm есть бесчисленное множество библиотек управления состояниями, таких как Redux, и существуют бесконечные библиотеки, построенные поверх других библиотек управления состояниями, чтобы упростить саму оригинальную библиотеку, например Redux Easy . Каждую неделю в React вводится новая библиотека управления состояниями, но базовые концепции поддержания состояния приложения остаются неизменными со времени введения React.

Наиболее распространенный способ установить состояние в React Native — использовать метод setState() React. У нас также есть API контекста, чтобы избежать детализации и пропустить состояние по многим уровням, не передавая его отдельным дочерним элементам в дереве.

Недавно в React появились версии 16.8.0 , которые представляют собой новый шаблон, упрощающий использование состояния в React. React Native получил его в v0.59 .

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

Хотите узнать React Native с нуля? Эта статья является выдержкой из нашей Премиум библиотеки. Получите полную коллекцию книг React Native, охватывающую основы, проекты, советы и инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 9 / месяц .

Что такое государство?

Все, что меняется со временем, называется состоянием . Если бы у нас было приложение Counter, состояние было бы самим счетчиком. Если бы у нас было приложение к списку дел, список задач со временем менялся бы, поэтому этот список был бы состоянием. Даже элемент ввода в некотором смысле является состоянием, так как со временем он вводится пользователем.

Введение в setState

Теперь, когда мы знаем, что такое состояние, давайте разберемся, как React хранит его.

Рассмотрим простое приложение-счетчик:

 import React from 'react' import { Text, Button } from 'react-native' class Counter extends React.Component { state = { counter: 0 } render() { const { counter } = this.state return ( <> <Text>{counter}</Text> <Button onPress={() => {}} title="Increment" /> <Button onPress={() => {}} title="Decrement" /> </> ) } } 

В этом приложении мы сохраняем наше состояние внутри constructor в объекте и присваиваем его this.state .

Помните, что состояние может быть только объектом. Вы не можете напрямую сохранить номер. Вот почему мы создали переменную counter внутри объекта.

В методе render мы деструктурируем свойство counter из this.state и this.state его внутри h1 . Обратите внимание, что в настоящее время будет отображаться только статическое значение ( 0 ).

Вы также можете написать свое состояние вне конструктора следующим образом:

 import React from 'react' import { Text, Button } from 'react-native' class Counter extends React.Component { state = { counter: 0 } render() { const { counter } = this.state return ( <> <Text>{counter}</Text> <Button onPress={() => {}} title="Increment" /> <Button onPress={() => {}} title="Decrement" /> </> ) } } 

Теперь давайте предположим, что мы хотим, чтобы кнопки + и - работали. Мы должны написать некоторый код внутри их соответствующих обработчиков onPress :

 import React from 'react' import { Text, Button } from 'react-native' class Counter extends React.Component { state = { counter: 0 } render() { const { counter } = this.state return ( <> <Text>{counter}</Text> <Button onPress={() => { this.setState({ counter: counter + 1 }) }} title="Increment" /> <Button onPress={() => { this.setState({ counter: counter - 1 }) }} title="Decrement" /> </> ) } } 

Теперь, когда мы нажимаем кнопки + и - , React выполняет рендеринг компонента. Это потому, что был использован метод setState() .

 import React from 'react' import { Text, Button } from 'react-native' class Counter extends React.Component { state = { counter: 0 } render() { const { counter } = this.state return ( <> <Text>{counter}</Text> <Button onPress={() => { this.setState(prevState => ({ counter: prevState.counter + 1 })) }} title="Increment" /> <Button onPress={() => { this.setState(prevState => ({ counter: prevState.counter - 1 })) }} title="Decrement" /> </> ) } } 

 import React from 'react' import { Text, Button } from 'react-native' const Counter = () => { const [ counter, setCounter ] = React.useState(0) return ( <> <Text>{counter}</Text> <Button onPress={() => { setCounter(counter + 1 ) }} title="Increment" /> <Button onPress={() => { setCounter(counter - 1 ) }} title="Decrement" /> </> ) } 

 const App = () => ( <> <Home theme="dark" /> <Settings /> </> ) const Home = () => ( <> <Profile /> <Timeline /> </> ) const Profile = () => ( <> <Pic theme={theme} /> <ChangePassword /> </> ) 

 import React from 'react' const ThemeContext = React.createContext("light") // set light as default const App = () => ( <ThemeContext.Provider value="dark"> <Home /> <Settings /> </ThemeContext.Provider> ) const Home = () => ( <> <Profile /> <Timeline /> </> ) const Profile = () => ( <ThemeContext.Consumer> {theme => ( <Pic theme={theme} /> <ChangePassword /> )} </ThemeContext.Consumer> ) 

 const Profile = () => { const theme = React.useContext(ThemeContext) return (<> <Pic theme={theme} /> <ChangePassword /> </> ) } 

 import { View, Text } from 'react-native' const App = () => ( <> <AddTodo /> <TodoList /> </> ) const TodoList = ({ todos }) => ( <View> {todos.map(todo => ( <Text> {todo} </Text>) )} </View> ) 

 import { View, Text, TextInput, Button } from 'react-native' const App = () => { const [ todos, setTodos ] = React.useState([]) return ( <> <AddTodo addTodo={todo => setTodos([...todos, todo])} /> <TodoList todos={todos} /> </> ) } const AddTodo = ({ addTodo }) => { const [ todo, setTodo ] = React.useState('') return ( <> <TextInput value={todo} onChangeText={value => setTodo(value)} /> <Button title="Add Todo" onPress={() => { addTodo(todo) setTodo('') }} /> </> ) } const TodoList = ({ todos }) => ( <View> {todos.map(todo => ( <Text> {todo} </Text>) )} </View> ) 

 const App = () => { const [ todos, setTodos ] = React.useState([]) return ( <> <AddTodo addTodo={todo => setTodos([...todos, todo])} /> <TodoList todos={todos} deleteTodo={todo => setTodos(todos.filter(t => t !== todo))} /> </> ) } const TodoList = ({ todos, deleteTodo }) => ( <View> {todos.map(todo => ( <Text> {todo} <Button title="x" onPress={() => deleteTodo(todo)} /> </Text>) )} </View> )