Как работать с государством и управлять им в действии

 class Clock extends React.Component { constructor(props) { super(props) this.state = {currentTime: (new Date()).toLocaleString()} } ... } 

Листинг 2: Конструктор компонента Clock (ch04 / clock)

Значение this.state должно быть объектом. Мы не будем вдаваться в подробности о ES6 constructor() , потому что есть информация в листе ES6 . Суть в том, что, как и в других языках ООП, constructor() вызывается при создании экземпляра этого класса. Имя метода конструктора должно быть constructor . Думайте об этом как соглашение ES6. Кроме того, если вы создаете метод constructor() , вам почти всегда нужно вызывать super() внутри него , иначе конструктор родителя не будет выполнен. С другой стороны, если вы не определили метод constructor() , тогда предполагается вызов super() .

Атрибуты класса

Надеемся, что TC39 (люди, стоящие за стандартом ECMAScript) добавят атрибуты к синтаксису класса в будущих версиях ECMAScript! Таким образом, разработчики могут устанавливать состояние не только в конструкторе, но и в теле класса:

 class Clock extends React.Component { state = { ... } } 

Предложение называется полями экземпляра класса или свойствами класса , но по состоянию на июль 2016 года оно доступно только с транспиляторами: Babel, Traceur или TypeScript, что означает, что ни один браузер не будет запускать эту функцию изначально. Проверьте текущую совместимость свойств класса в таблице совместимости ECMAScript .

Здесь curentTime — произвольное имя, и нам нужно будет использовать то же имя позже при доступе и обновлении этого состояния. Вы можете назвать свое государство в любом случае, если захотите, если позже к нему будете обращаться по этому имени.

Объект состояния может иметь вложенные объекты или массивы. Посмотрите на этот пример, где я добавляю массив моих книг в состояние:

 class Content extends React.Component { constructor(props) { super(props) this.state = { githubName: 'azat-co', books: [ 'pro express.js', 'practical node.js', 'rapid prototyping with js' ] } } render() { ... } } 

Метод constructor() будет вызван один раз, когда из этого класса будет создан элемент React. Таким образом, мы можем установить состояние напрямую, используя this.state , в методе constructor() . Не устанавливайте и не this.state = ... состояние напрямую с помощью this.state = ... где-либо еще, поскольку это может привести к непредвиденным последствиям.

С собственным createClass() React createClass() для определения компонента вам нужно использовать getInitialState() .

Это даст нам только первое значение, которое быстро устареет; в одну секунду Какой смысл в часах, которые не показывают текущее время? К счастью, есть способ обновить состояние.

Обновление состояний

Мы изменяем состояние с помощью метода класса this.setState(data, callback) . Когда этот метод вызывается, React объединяет данные с текущими состояниями и вызывает render() . После этого React вызывает callback .

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

Мы визуализировали время из состояния, мы также установили начальное состояние, но нам нужно обновлять время каждую секунду, верно? Мы можем использовать функцию таймера браузера setInterval() которая будет выполнять обновление состояния каждые n миллисекунд. Метод setInterval() реализован практически во всех современных браузерах как глобальный, что означает, что разработчики могут использовать его без каких-либо библиотек или префиксов.

 setInterval(()=>{ console.log('Updating time...') this.setState({ currentTime: (new Date()).toLocaleString() }) }, 1000) 

Чтобы запустить часы, нам нужно вызвать setInterval() один раз. Мы можем создать метод launchClock() для этого. Мы будем вызывать launchClock() в конструкторе. Последние часы могут выглядеть так, как показано в листинге 3.

 class Clock extends React.Component { constructor(props) { super(props) this.launchClock() <1> this.state = { currentTime: (new Date()).toLocaleString() <2> } } launchClock() { setInterval(()=>{ console.log('Updating time...') this.setState({ currentTime: (new Date()).toLocaleString() <3> }) }, 1000) <4> } render() { console.log('Rendering Clock...') return <div>{this.state.currentTime}</div> <5> } } 

 constructor(props) { super(props) this.state = { userName: , userEmail: '[email protected]', userId: 3967 } } updateValues() { this.setState({userName: 'Azat'}) } 

 setInterval(()=>{ this.setState({ currentTime: (new Date()).toLocaleString() }) }, 1000) 

 function() {...}.bind(this) 

 setInterval(function(){ this.setState({ currentTime: (new Date()).toLocaleString() }) }.bind(this), 1000) 

 var that = this var _this = this var self = this 

 var _this = this setInterval(function(){ _this.setState({ currentTime: (new Date()).toLocaleString() }) }, 1000) 

 class HelloWorld extends React.Component { render() { return <h1 {...this.props}>Hello {this.props.frameworkName} World!!!</h1> } } 

 const HelloWorld = function(props){ return <h1 {...props}>Hello {props.frameworkName} world!!!</h1> } 

 const HelloWorld = (props)=>{ return <h1 {...props}>Hello {props.frameworkName} world!!!</h1> } 

 function Link (props) { return <a href={props.href} target="_blank" className="btn btn-primary">{props.text}</a> } ReactDOM.render( <Link text='Buy React Quickly' href='https://www.manning.com/books/react-quickly'/>, document.getElementById('content') ) 

 const Link = props=> <a href={props.href} target="_blank" className="btn btn-primary">{props.text}</a> 

 function Link (props) { return <a href={props.href} target="_blank" className="btn btn-primary">{props.text}</a> } Link.propTypes = {...} Link.defaultProps = {...}