React 组件生命周期(注意state不能在cwu方法中修改)
Component Specs and LifecycleComponent Specifications When creating a component class by invoking
renderReactElement render()
The When called,it should examine You can also return render()function should bepure,meaning that it does not modify component state,it returns the same result each time it's invoked,and it does not read from or write to the DOM or otherwise interact with the browser (e.g.,by using getInitialStateobject getInitialState()
Invoked once before the component is mounted. The return value will be used as the initial value of getDefaultPropsobject getDefaultProps()
Invoked once and cached when the class is created. Values in the mapping will be set on This method is invoked before any instances are created and thus cannot rely on propTypesobject propTypes
propTypesobject allows you to validate props being passed to your components. For more information about mixinsarray mixins
mixinsarray allows you to use mixins to share behavior among multiple components. For more information about mixins,249)"> statics object statics
staticsobject allows you to define static methods that can be called on the component class. For example: var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
renderfunction() {
}
});
MyComponent.customMethod('bar'); // true
Methods defined within this block arestatic,meaning that you can run them before any component instances are created,and the methods do not have access to the props or state of your components. If you want to check the value of props in a static method,have the caller pass in the props as an argument to the static method. displayNamestring displayName
displayNamestring is used in debugging messages. JSX sets this value automatically; seeJSX in Depth. Lifecycle MethodsVarious methods are executed at specific points in a component's lifecycle. Mounting: componentWillMountvoid componentWillMount()
Invoked once,both on the client and server,immediately before the initial rendering occurs. If you call Mounting: componentDidMountvoid componentDidMount()
componentDidMount()method of child components is invoked before that of parent components. If you want to integrate with other JavaScript frameworks,set timers using Updating: componentWillReceivePropsvoid componentWillReceiveProps(
object nextProps
)
Invoked when a component is receiving new props. This method is not called for the initial render. Use this as an opportunity to react to a prop transition before componentWillReceivePropsfunction(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
Updating: shouldComponentUpdateboolean shouldComponentUpdate(
object nextProps, object nextState
)
Invoked before rendering when new props or state are being received. This method is not called for the initial render or when Use this as an opportunity to shouldComponentUpdatefunction(nextProps, nextState) {
return nextProps.id !== this.props.id;
}
If By default,85)">shouldComponentUpdatealways returns If performance is a bottleneck,especially with dozens or hundreds of components,85)">shouldComponentUpdateto speed up your app. Updating: componentWillUpdatevoid componentWillUpdate(
object nextProps,249)"> Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render.
Use this as an opportunity to perform preparation before an update occurs.
Updating: componentDidUpdatevoid componentDidUpdate(
object prevProps, object prevState
)
Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated. Unmounting: componentWillUnmount#void componentWillUnmount()
Invoked immediately before a component is unmounted from the DOM. Perform any necessary cleanup in this method,such as invalidating timers or cleaning up any DOM elements that were created in (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |