Основы
1. React.createElement(type, props, children)
Создать ReactElement с переданными ему class, props, children.
var link = React.createElement('a', {href: '#'}, "Save")
var nav = React.createElement(MyNav, {flat: true}, link)
2. React.cloneElement(element, props, children)
Создать новый ReactElement объединенный с новыми props и children.
3. ReactDOM.render(element, domNode)
Взять ReactElement, отредерить его и вставить DOM node.
ReactDOM.render(React.createElement('div'), document.getElementById('container'))
4. ReactDOM.findDOMNode(element)
Вернуть DOM node соответствующий заданному элементу (после рендеринга).
Особые props
children - автоматически добавляется в this.props функцикй React.createElement.
className - соответствует атрибуту class в HTML.
htmlFor - соответствует атрибуту for в HTML.
key - уникальные идентификаторы для каждого ReactElement. Используется с элементами в массивах.
ref - принимает callback function, которая будет вызвана:
1. с экземпляром компонента или DOM node при его монтировании (mount).
2. с null или unmount и когда произошло изменение функционала.
style - принимает объект со стилями style вместо строки.
Типы props
Доступны в составе React.PropTypes. По желанию добавить .isRequired.
| any | array | bool | element | func |
| node | number | object | string |
instanceOf(constructor)
oneOf(['News', 'Photos'])
oneOfType([propType, propType])
Компоненты Class Components
var MyComponent = React.createClass({
displayName: 'MyComponent',
/* ... options and lifecycle methods ... */
render: function() {
return React.createElement( /* ... */ )
},
... далее опции и методы ...
});
Опции
propTypes - объект содержащий сопоставления имен props с их типами
getDefaultProps - function() возвращает объект
getInitialState - function() возвращает объект
Методы жизненного цикла компоненты
componentWillMount - function()
componentDidMount - function()
componentWillReceiveProps - function(nextProps)
shouldComponentUpdate - function(nextProps, nextState) возвращает boolen
componentWillUpdate - function(nextProps, nextState)
componentDidUpdate - function(prevProps, prevState)
componentWillUnmount - function()
Описание характеристик экземпляров компонентов:
- Доступны через this внутри класса компонента (class component)
- Компоненты без состояний (stateless functional components) не имеют экземпляров компонентов (component instances).
- Обслуживаются как объекты переданные в ref callbacks
- Один экземпляр компонента может обслуживать множество ReactElements.
Свойства
props - содержит любые свойства props переданные в React.createElement
state - содержит состояние state установленное через функцию setState и полученное через функцию getInitialState
Методы
1. setState(changes) - применяет изменения к this.state и перерисовывает компонент
2. forceUpdate() - немендленно перерисовывает компонент в DOM
Код в стиле ECMAScript 6
Компоненты - это классы
export class MyComponent extends Component {
componentWillMount() {
// ...
}
render() {
return <div>Hello World</div>
}
}
Свойства статичны
export class MyComponent extends Component {
static propTypes = {
// ...
}
static defaultProps = {
// ...
}
}
Первоначальное состояние
export class MyComponent extends Component {
state = {
disabled: this.props.disabled,
}
}
Конструкторы заменяют собой componentWillMount
export class MyComponent extends Component {
constructor(props) {
super(props)
// Do stuff
}
}
Привязывайте методы к вашему компоненту, когда используете их в качестве обработчиков handlers
export class MyComponent extends Component {
onMouseEnter = event => {
this.setState({hovering: true})
}
}
Импорт React
JSX предполагает, что объект React доступен, поэтому его надо тоже импортировать
import React, { Component, PropTypes } from 'react'
Деструктурирование особенно удобно для компонентов с неизменным состоянием (stateless)
export const Commas = ({items, ...otherProps}) => <div {...otherProps}>{items.join(', ')}</div>
Строковые литералы можно использовать для динамического создания className
<input className={`Control-${this.state}`} />
и для создания динамических имен свойств
this.setState({
[`${inputName}Value`]: e.target.value,
});
Декораторы классов можно использовать в качестве mixin
@something(options)
class MyComponent extends Component {}
// В итоге превращается в
let MyComponent = something(options)(
class MyComponent extends Components {}
)
Дополнительные подсказки
Basic class
React.createClass({
render: function () {
return (
<div>Hello {this.props.name}</div>
);
}
});
Using components
var Component = React.createClass({ ... });
var compo = React.render(<Component />, mountnode);
States
this.setState({ editing: true });
this.state.editing === true
this.replaceState({ ... });
Properties
this.setProps({ fullscreen: true });
this.props.fullscreen === true
this.replaceProps({ ... });
API
c.getDOMNode() // deprecated 0.13
React.findDOMNode(c) // 0.13+
c.forceUpdate()
c.isMounted()
Methods
{
render: function()
getInitialState: function()
getDefaultProps: function()
mixins: []
propTypes: {} / for validation /
statics: { .. } / static methods /
displayName: '..' / automatically filled in by jsx /
}
Lifecycle
componentWillMount()
componentDidMount()
// not on initial render
componentWillReceiveProps(props)
shouldComponentUpdate(props, state)
componentWillUpdate(props, state)
componentDidUpdate(prevProps, prevState)
componentWillUnmount()
// ...there is no DidUnmount or ReceiveState.
Initial States
React.createClass({
getInitialState: function () {
return {data: []};
},
render: function () {
return (
<CommentList data={this.state.data} />
);
}
});
Default Properties
React.createClass({
getDefaultProps: function () {
return {name: ''};
}
);
Before Rendering
React.createClass({
componentWillMount: function () {
$.get(this.props.url, function (data) {
this.setState(data);
});
},
render: function () {
return (
<CommentList data={this.state.data} />
);
}
});
Actions
<form onSubmit={this.handleSubmit}>
Name: <input ref="name">
</form>
React.createClass({
handleSubmit: function (event) {
name = this.refs['name'].getDOMNode().value;
// see two-way binding below
}
})
Two-way binding
React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {value: 'Hello!'};
},
render: function() {
return <input type="text" valueLink={this.linkState('value')} />;
}
});
// LinkedStateMixin adds a method to your React component called
// linkState().
Lists
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
Property validations
React.createClass({
propTypes: {
// required
requiredFunc: React.PropTypes.func.isRequired,
requiredAny: React.PropTypes.any.isRequired,
// primitives, optional by default
bool: React.PropTypes.bool,
func: React.PropTypes.func,
number: React.PropTypes.number,
string: React.PropTypes.string,
}
});
Class set
render: function() {
var cx = React.addons.classSet;
var classes = cx({
'message': true,
'message-important': this.props.isImportant,
'message-read': this.props.isRead
});
// same final string, but much cleaner
return <div className={classes}>Great Scott!</div>;
}
Propagating properties to children
var VideoPlayer = React.createClass({
render: function() {
return <VideoEmbed {...this.props} controls='false' />;
}
});
<VideoPlayer src="video.mp4" />
Mixins
var TickTock = React.createClass({
mixins: [SetIntervalMixin]
}
SetIntervalMixin = {
componentWillMount: function() { .. }
}
Комментариев нет:
Отправить комментарий