Files

Egor 346b0a7ce1 docs: update Russian translation for the whole React guide (#23636 )

* docs: update translation for React guide in Russian

* fix: removed extra line before frontmatter block

* fix: removed extra line in frontmatter block

* fix: corrected frontmatter block

* fix: corrected localeTitle in frontmatter block

* Update index.md

* fix: corrected localeTitle for Installation

* Update index.md

* Update index.md

2018-11-22 22:49:48 +04:00

3.7 KiB

Raw Blame History

title, localeTitle

title	localeTitle
State	State

State

State (состояние) - это место, откуда поступают данные.

Мы всегда должны стараться максимально упростить наше состояние и свести к минимуму количество компонентов состояния. Если у нас есть, например, десять компонентов, которым нужны данные из состояния, мы должны создать один компонент контейнера, который будет сохранять состояние для них всех.

Состояние в основном похоже на глобальный объект, доступный везде в компоненте.

Пример компонента Stateful Class:

import React from 'react'; 
 
 class App extends React.Component { 
  constructor(props) { 
    super(props); 
 
    // We declare the state as shown below 
 
    this.state = { 
      x: "This is x from state", 
      y: "This is y from state" 
    } 
  } 
  render() { 
    return ( 
      <div> 
        <h1>{this.state.x}</h1> 
        <h2>{this.state.y}</h2> 
      </div> 
    ); 
  } 
 } 
 export default App;

Другой пример:

import React from 'react'; 
 
 class App extends React.Component { 
  constructor(props) { 
    super(props); 
 
    // We declare the state as shown below 
    this.state = { 
      x: "This is x from state", 
      y: "This is y from state" 
    } 
  } 
 
  render() { 
    let x1 = this.state.x; 
    let y1 = this.state.y; 
 
    return ( 
      <div> 
        <h1>{x1}</h1> 
        <h2>{y1}</h2> 
      </div> 
    ); 
  } 
 } 
 export default App;

Обновление State

Вы можете изменить данные, хранящиеся в состоянии вашего приложения, используя метод setState на вашем компоненте.

this.setState({ value: 1 });

Имейте в виду, что setState является асинхронным, поэтому вы должны быть осторожны при использовании текущего состояния для установки нового состояния. Хорошим примером этого может быть, если вы хотите увеличить значение в своем состоянии.

Неправильно

this.setState({ value: this.state.value + 1 });

Это может привести к непредвиденному поведению в вашем приложении, если код выше вызывается несколько раз в том же цикле обновлений. Чтобы этого избежать, вы можете передать функцию обратного вызова setState для setState вместо объекта.

Правильно

this.setState(prevState => ({ value: prevState.value + 1 }));

Правильнее

this.setState(({ value }) => ({ value: value + 1 }));

Если требуется только ограниченное количество полей в объекте состояния, для очистки кода может использоваться уничтожение объекта.

3.7 KiB Raw Blame History Unescape Escape