ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Rewrite react

This commit is contained in:
Rico Sta. Cruz 2015-04-17 18:19:17 +08:00
parent 8502cc9cb2
commit c86fa47a04
1 changed files with 241 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

330
react.md
View File

@ -3,27 +3,21 @@ title: React.js
layout: default layout: default
--- ---
### Basic class ## Components
```js ```js
React.createClass({ var Component = React.createClass({
render: function () { render: function () {
return ( return <div>Hello {this.props.name}</div>;
<div>Hello {this.props.name}</div>
);
} }
}); });
``` ```
### Using components
```js ```js
var Component = React.createClass({ ... }); var c = React.render(<Component name="John" />, document.body);
var compo = React.render(<Component />, mountnode);
``` ```
### States ## States & Properties
```js ```js
this.setState({ editing: true }); this.setState({ editing: true });
@ -32,8 +26,6 @@ this.state.editing === true
this.replaceState({ ... }); this.replaceState({ ... });
``` ```
### Properties
```js ```js
this.setProps({ fullscreen: true }); this.setProps({ fullscreen: true });
this.props.fullscreen === true this.props.fullscreen === true
@ -41,71 +33,90 @@ this.props.fullscreen === true
this.replaceProps({ ... }); this.replaceProps({ ... });
``` ```
### [API](http://facebook.github.io/react/docs/component-api.html) ### Initial states and properties
```js ```js
c.getDOMNode() // deprecated 0.13
React.findDOMNode(c) // 0.13+
c.forceUpdate()
c.isMounted()
```
### [Methods](http://facebook.github.io/react/docs/component-specs.html)
```js
{
render: function()
getInitialState: function()
getDefaultProps: function()
mixins: []
propTypes: {} /* for validation */
statics: { .. } /* static methods */
displayName: '..' /* automatically filled in by jsx */
}
```
### [Lifecycle](http://facebook.github.io/react/docs/component-specs.html)
```js
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({ React.createClass({
// Pre-populates `this.state.data`
getInitialState: function () { getInitialState: function () {
return {data: []}; return {data: []};
}, },
render: function () { // Pre-populates `this.props.name`
return (
<CommentList data={this.state.data} />
);
}
});
### Default properties
React.createClass({
getDefaultProps: function () { getDefaultProps: function () {
return {name: ''}; return {name: ''};
} }
); );
```
### Before rendering ## Component API
These are methods available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html).
{:.center}
```js
React.findDOMNode(c) // 0.13+
```
```js
c.forceUpdate()
c.isMounted()
c.state
c.props
c.setState({ ... })
c.setProps({ ... })
c.replaceState({ ... })
c.replaceProps({ ... })
c.refs
```
### [Component specs](http://facebook.github.io/react/docs/component-specs.html)
Methods and properties you can override in your class definitions.
| Method | What |
| ---- | ---- |
| [`render()`](http://facebook.github.io/react/docs/component-specs.html#render) | |
| [`getInitialState()`](http://facebook.github.io/react/docs/component-specs.html#getinitialstate) | |
| [`getDefaultProps()`](http://facebook.github.io/react/docs/component-specs.html#getdefaultprops) | |
| [`mixins: [ ... ]`](http://facebook.github.io/react/docs/component-specs.html#mixins) | Mixins |
| [`propTypes: { ... }`](http://facebook.github.io/react/docs/component-specs.html#proptypes) | Validation ... [more](#property-validation) |
| [`statics: { ... }`](http://facebook.github.io/react/docs/component-specs.html#statics) | Static methods |
| [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX |
{:.greycode.no-head}
## [Lifecycle](http://facebook.github.io/react/docs/component-specs.html)
### Mounting
| `componentWillMount()` | Before rendering (no DOM yet) |
| `componentDidMount()` | After rendering |
{:.greycode.no-head.lc}
### Updating
| `componentWillReceiveProps`*(newProps={})* | Use `setState()` here; not on initial |
| `shouldComponentUpdate`*(newProps={}, newState={})* | Skips `render()` if returns false |
| `componentWillUpdate`*(newProps={}, newState={})* | Can't use `setState()` here |
| `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here |
{:.greycode.no-head.lc}
### Cleanup
| `componentWillUnmount()` | Invoked before DOM removal |
{:.greycode.no-head.lc}
<style>
table.lc { table-layout: fixed; }
table.lc tr>:nth-child(1) { width: 50%; }
table.lc tr>:nth-child(2) { text-align: right; }
</style>
### Example: before rendering
```js
React.createClass({ React.createClass({
componentWillMount: function () { componentWillMount: function () {
$.get(this.props.url, function (data) { $.get(this.props.url, function (data) {
@ -119,95 +130,128 @@ componentWillUnmount()
); );
} }
}); });
```
### Actions ## DOM nodes
<form onSubmit={this.handleSubmit}> ### References
Name: <input ref="name"> Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html).
</form>
React.createClass({ ```html
handleSubmit: function (event) { <input ref="myInput">
name = this.refs['name'].getDOMNode().value; ```
// see two-way binding below {:.light}
```js
this.refs.myInput
React.findDOMNode(this.refs.myInput).focus()
React.findDOMNode(this.refs.myInput).value
```
### DOM Events
Add attributes like `onChange`. See [events](https://facebook.github.io/react/docs/events.html).
```html
<input type="text"
value={this.state.value}
onChange={this.handleChange} />
```
{:.light}
```js
handleChange: function(event) {
this.setState({ value: event.target.value });
} }
}) ```
### [Two-way binding](http://facebook.github.io/react/docs/two-way-binding-helpers.html) ### Two-way binding
Use [LinkedStateMixin](http://facebook.github.io/react/docs/two-way-binding-helpers.html) for easier two-way binding.
```html
Email: <input type="text" valueLink={this.linkState('email')} />
```
{:.light}
```js ```js
React.createClass({ React.createClass({
mixins: [React.addons.LinkedStateMixin], 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 ```js
this.state.email
```
var TodoList = React.createClass({ ## Property validation
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
### [Property validation](http://facebook.github.io/react/docs/reusable-components.html#prop-validation) ### Basic types
Primitive types: `.string`, `.number`, `.func`, and `.bool`. See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
```js ```js
React.createClass({ React.createClass({
propTypes: { propTypes: {
// required email: React.PropTypes.string,
seats: React.PropTypes.number,
callback: React.PropTypes.func,
isClosed: React.PropTypes.bool,
any: React.PropTYpes.any,
}
});
```
### Required types
Add `.isRequired`.
```js
propTypes: {
requiredFunc: React.PropTypes.func.isRequired, requiredFunc: React.PropTypes.func.isRequired,
requiredAny: React.PropTypes.any.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,
}
});
``` ```
Also: ### React elements
Use `.element`, `.node`.
```js ```js
propTypes: { propTypes: {
message: React.PropTypes.instanceOf(Message), // instanceof any Class element: React.PropTypes.element, // react element
element: React.PropTypes.element, // A React element node: React.PropTypes.node, // num, string, element
enum: React.PropTypes.oneOf(['News', 'Photos']), // ...or array of those
node: React.PropTypes.node, // num, string, element, or array of these ```
// any of below ### Enumerables
union: React.PropTypes.oneOfType([ Use `.oneOf`, `.oneOfType`.
```
propTypes: {
enum: React.PropTypes.oneOf(['M','F']), // enum
union: React.PropTypes.oneOfType([ // any
React.PropTypes.string, React.PropTypes.string,
React.PropTypes.number React.PropTypes.number ]),
]), ```
// arrays ### Arrays and objects
Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`.
```js
propTypes: {
array: React.PropTypes.array, array: React.PropTypes.array,
arrayOf: React.PropTypes.arrayOf(React.PropTypes.number), arrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// objects
object: React.PropTypes.object, object: React.PropTypes.object,
objectOf: React.PropTypes.objectOf(React.PropTypes.number), objectOf: React.PropTypes.objectOf(React.PropTypes.number),
// An object taking on a particular shape message: React.PropTypes.instanceOf(Message),
object2: React.PropTypes.shape({ object2: React.PropTypes.shape({
color: React.PropTypes.string, color: React.PropTypes.string,
fontSize: React.PropTypes.number size: React.PropTypes.number
}), }),
```
// custom validator ### Custom validation
Supply your own function.
```js
propTypes: {
customProp: function(props, propName, componentName) { customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) { if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!'); return new Error('Validation failed!');
@ -216,6 +260,8 @@ Also:
} }
``` ```
## Other features
### [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html) ### [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html)
render: function() { render: function() {
@ -249,8 +295,52 @@ Also:
componentWillMount: function() { .. } componentWillMount: function() { .. }
} }
---- ## [Top level API](https://facebook.github.io/react/docs/top-level-api.html)
### See also ```js
React.findDOMNode(c)
React.createClass({ ... })
React.render(<Component />, domnode, [callback])
React.unmountComponentAtNode(domnode)
React.renderToString(<Component />)
React.renderToStaticMarkup(<Component />)
React.isValidElement(c)
```
## JSX patterns
### Style shorthand
See [inline styles](https://facebook.github.io/react/tips/inline-styles.html).
```js
var style = { backgroundImage: 'url(x.jpg)', height: 10 };
return <div style={style}></div>;
```
### InnerHTML
See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
```js
function createMarkup() { return {__html: 'First &middot; Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />
```
### Lists
```js
var TodoList = React.createClass({
render: function() {
function item(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(item)}</ul>;
}
});
```
## See also
* [Animations](http://facebook.github.io/react/docs/animation.html) * [Animations](http://facebook.github.io/react/docs/animation.html)