react组件
- @H_404_4@参考:https://facebook.github.io/re...
class Greeting extends React.Component { render() { return <h1>Hello,{this.props.name}</h1>; } }@H_404_4@如果不想使用es6的class,也可以使用react提供的react.createClass({}),就像如下:
var Hello = React.createClass({ render: function() { return <div>Hello Taobao,Hello UED</div>; } });@H_404_4@对于定义好的组件,就可以直接使用了,react在使用html标准标签和react组件标签时是通过首字母来进行区别的,大写首字母就是自定义组件,无论是自定义组件还是html标准标签,处理的方式是一样的,使用React.createElemment来进行过组件的引用:
React.createElement( type,[props],[...children] )@H_404_4@这也是说明在jsx中无法书写 if for之类的语句,且可以使用js表达式的原因了。可以看看:http://reactjs.cn/react/tips/...
// This JSX: <div id={if (condition) { 'msg' }}>Hello World!</div> // Is transformed to this JS: React.createElement("div",{id: if (condition) { 'msg' }},"Hello World!"); ReactDOM.render(<div id={condition ? 'msg' : null}>Hello World!</div>,mountNode);
react生命周期
@H_404_4@参考:https://facebook.github.io/re...https://segmentfault.com/a/11...
- @H_404_4@mounting (实例化阶段)这个阶段的方法都是在组件被实例化、插入DOM中的过程中被顺序调用的
- @H_404_4@getDefaultProps、getInitialState或者 constructor(props) @H_404_4@【前两者es5写法,都是配合create-react-class可以设置初始 props、state的内容,】
var createReactClass = require('create-react-class'); var Greeting = createReactClass({ getDefaultProps: function() { return { name: 'Mary' }; },getInitialState: function() { return {count: this.props.initialCount}; },// ... });
@H_404_4@【后者使用es6写法,通过使用class就可以完成上面的操作,比较的简单】class Greeting extends React.Component { constructor(props) { super(props); this.state = {count: props.initialCount}; } // ... } Greeting.defaultProps = { name: 'Mary' };
@H_404_4@在实例化之前counstructor会被调用,首先需要执行的是 super(props),这句需要在构造函数的最前面,这里也是最适合初始化state的地方,如果这个组件不需要state、也不需要绑定任何方法,可以不调用constructor函数, - @H_404_4@componentWillMount()
在实例化时最开始执行,在这里同步的修改state不会引起重新的渲染,在这里需要注意的是,官网有这样一段话: This is the only lifecycle hook called on server rendering. Generally,we recommend using the constructor() instead. 我的理解是服务端渲染的实例化阶段只会执行componentWillMount这一个钩子,不过参考的文章:https://segmentfault.com/a/1190000004168886#articleHeader3 有这样的描述,这里具体就不太清楚了: ![图片描述][1]
- @H_404_4@render() 补充部分有说明
- @H_404_4@componentDidMount()
官网说了,这个是在实例化完成立刻调用的函数,所以如果需要异步请求的话这里是最好的选择,然后更新state,从而进行重新渲染。
- @H_404_4@getDefaultProps、getInitialState或者 constructor(props) @H_404_4@【前两者es5写法,都是配合create-react-class可以设置初始 props、state的内容,】
- @H_404_4@updating (更新期)在组件的props、state发生变化需要重新渲染时调用这个阶段的函数
- @H_404_4@componentWillReceiveProps(nextProps)
在实例化完成以后,如果有新的props将接受了,可以在这里处理props的对比,可能props没有改变也会触发这个钩子函数,可能输父级元素的重新渲染,只在更新期才会触发,当然在更新期修改state并不会触发
- @H_404_4@shouldComponentUpdate()
在更新期接受到了props和state后,这里可以对比props和state,从而分析是否需要进行重新的渲染,这个函数在forceUpdate()来进行强制刷新时不会被调用,这个函数会返回布尔值,当返回false时,后面的willupdate、render、didupdate都不会执行,不过这并不会影响改组件的子元素的渲染,当子元素的props或者state有变化时还是会重新渲染。
- @H_404_4@componentWillUpdate(nextProps,nextState)
这里最好不要做stestate的事情,setstate可以在componentWillReceiveProps时使用,如果shouldComponentUpdate返回false则不会调用了。
- @H_404_4@render()
- @H_404_4@componentDidUpdate()
这里是进行DOM操作的最佳时机,也是发起异步请求数据的好时机
- @H_404_4@componentWillReceiveProps(nextProps)
- @H_404_4@unmounting (销毁期)当组件需要从DOM中移除时,或者页面切换时需要调用
- @H_404_4@componentWillUnmount()
这里可以用来消除创建的定时器、dom元素、异步请求等资源
- @H_404_4@componentWillUnmount()
补充
- @H_404_4@render()函数在实例化和更新时都会被调用,除了在更新时起发生了componentWillUnmount()返回false这种情况,render执行时会检测props、state和是否只返回来了一个人顶级元素,也可以使用返回null或者false这样的,会被忽略渲染,render函数最好也是纯函数,
- @H_404_4@setState(updater,[callback]),这是一个异步操作,所以这并不会立刻改变satte的值,甚至会等上好几次的修改来合并进行,
- @H_404_4@forceUpdate,进行强制渲染,一般而言最好是不用,使用的话将不会调用更新阶段的shouldComponentUpdate()钩子函数,