React react支持IE9+
组建的生命周期
react组件生命周期图例
挂载
- getInitialState es5中使用的初始化状态componentWillMount() - 组件实例即将挂接（初次渲染）时被调用，这个方法在整个生命周期中只会被调用一次。
render()-这里说一下，组件的中render函数返回的是支撑实例（vercialDOM），reactDOM.render()返回组件的支撑实例（backing instance）——组建的描述。无状态组件没有支撑实例返回null。
- componentDidMount() - 组件实例挂接（初次渲染）后被调用 ，这个方法在整个生命周期中只会被调用一次。
更新 - componentWillReceiveProps(nextProps) - 组件实例即将设置新属性时被调用，参数nextProps表示即将应用到组件实例上的新属性值。这个方法在初次渲染时不会被调用。在此方法内调用setState()不会引起重新渲染。
- shouldComponentUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用，参数nextProps传入即将应用到组件实例上的新属性值，参数nextState传入组件实例即将被设置的状态值。如果这个方法返回false，那么组件实例就不会被重新渲染。除非我们明确地 知道，新的属性和状态不需要进行重新渲染，否则这个方法都应该返回true。这个方法在初次渲染时或通过forceUpdate()方法进行渲染时不会被调用。
- componentWillUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用 这个方法在初次渲染时不会被调用。注意：不能在此方法内调用setState()。
销毁 - componentDidUpdate(prevProps, prevState) - 组件实例重新渲染后被调用，这个方法在初次渲染时不会被调用。销毁componentWillUnmount() - 组件实例即将从DOM树移除时被调用，这个方法在整个生命周期中只会被调用一次。
可调用的方法
component.forceUpdate()-在任何生命周期阶段调用，当你知道一些底层方面组件状态的改动且不适用于this.setState的时候。
state 与 props使用场景
- 事件处理后值发生变化反映到UI界面上变化的，使用state
- 使用props作为唯一的数据来源
- 减少把props的值赋值给state
- 把对于state 和 props 计算用于展示的逻辑放在render中
es6 写法不同于 es5的地方以及最佳实践
//es6写法
export class Counter extends React.Component { constructor(props) { super(props); this.state = {count: props.initialCount}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }}Counter.propTypes = { initialCount: React.PropTypes.number };Counter.defaultProps = { initialCount: 0 };
- 没有getIntialState 方法，state的初始化在构造函数中进行
- propTypes 与defaultProps被定义为属性
- 没有为事件自动绑定，需要如下手动绑定或使用箭头函数绑定
// You can use bind() to preserve `this`<div onClick={this.tick.bind(this)}>// Or you can use arrow functions<div onClick={() => this.tick()}>
最佳实践在这里
···
constructor(props) { super(props); this.state = {count: props.initialCount}; this.tick = this.tick.bind(this);}···<div onClick={this.tick}>
- 不再支持mixin+ 无状态组件写法
尽可能使用无状态组件写法，尽管他不能通过ref引用到
JSX 中使用
...
传递列出当前使用不需要继续传递下去的
javascript render(){ var {checked, ...other} = this.props; fancyClass = checked ? 'FancyCheckd' : 'FancyUnchecked'; return(<div {...other} className={fancyClass}</div>) }
checkboxes 与 Radio 潜在问题
Be aware that, in an attempt to normalize change handling for checkbox and radio inputs, React uses a click event in place of a change event. For the most part this behaves as expected, except when calling preventDefault in a change handler. preventDefault stops the browser from visually updating the input, even if checked gets toggled. This can be worked around either by removing the call to preventDefault, or putting the toggle of checked in a setTimeout.
ref
ref —— 回调属性当组件创建完成后，ref回调会被立即执行。对应的元素会作为参数传入函数中，回调函数可以立即使用参数，也可以将它保存起来。
render: function() { return <TextInput ref={(c) => this._input = c} />; }, componentDidMount: function() { this._input.focus(); },
如果ref绑定的元素是原生组件，返回的是支撑实例，如果是自定义组件，返回的是该组件的实例，可以调用该组件暴露的方法。如果使用行内函数表达式的方式写的refs，react在组件更新的之后，把它看作为不同的函数对象，回调函数会被传入null执行。ref ——字符串属性现阶段被兼容处理，未来会被移除，回调方式是被推荐的，（于是不看了）。一个复杂的例子
MyComponent = React.createClass({ handleClick: function() { // Explicitly focus the text input using the raw DOM API. if (this.myTextInput !== null) { this.myTextInput.focus(); } }, render: function() { // The ref attribute is a callback that saves a reference to the // component to this.myTextInput when the component is mounted. return ( <div> <input type="text" ref={(ref) => this.myTextInput = ref} /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); }});ReactDOM.render( <MyComponent />, document.getElementById('example'));
例子中，我们或得支撑实例的引用，当button点击的时候input被focus。
小结
当在使用常规数据流（改变子组件props）不方便的情况下，ref是一种很好的传送信息给组件实例的方式。默认情况下，使用react数据流保存ref备用。
便利
- 子组件中定义的public方法，可以通过ref的方式被外部组件调用。（能使用数据流方式还是使用数据流方式，因为这样更加清晰）
- 对于测量dom节点样式，这是唯一适用方法。
- 当内容被销毁，ref的引用一同被销毁，这里无须担心销毁的问题。
注意：
永远不要再render方法中引用
第二条是关于字符串方式引用的不看了……
无状态组件中不能使用
网友评论