React初识
React只是MVC中的V。
React核心是Component,Component是html / javascript的合集。
React相关基础概念
JSX
在javascript中写HTML的语法工具。
Virtual DOM
虚拟DOM。React自己生成的一套DOM系统,用于渲染真实的DOM。
React.createClass
创建一个Component的方法。
render(method)
Component的HTML模板。
React.render
渲染React Component到真实的DOM结点上。
state
Component的状态,其实就是Component的内置数据,通过更改state属性,可以对实现对Component的更新。 例如,下面的代码里通过this.state.name控制Component中的内容展示。
render: function() {
return (
<header>
{ this.state.name ?
this.state.name :
<span>Not Logged In</span> }
</header>
);
}
getInitialState
获取Component的初始化state。
setState
设置Component的state属性。
props
父级Component传递给子级Component的属性。比如onClick也是props的一种。在下面这个例子中父级节点 传递了 name=“Tyler” 给子节点
var HelloUser = React.createClass({
render: function(){
return (
<div> Hello, {this.props.name}</div>
)
}
});
React.render(<HelloUser name="Tyler"/>, document.getElementById('app'));
setProps
设置props属性。需要注意的是这个函数只能在父级节点设置子级节点的props,不能调用 this.setProps,或者直接修改this.props,这是一个只读属性。
propTypes
用于控制props属性的数据类型。通过这个属性可以很好的描述组件的API。
getDefaultProps
获取默认的props属性的值。这个函数是不是在组件实例化的时候调用的,而是在React.createClass时调用的,所以无法在这个函数中使用特定的实例数据。
Component LifeCycle
这里列出的是跟Component生命周期相关的方法,不是完整的Component生命周期。
- componentWillMount——Component创建之前触发
- componentDidMount——Component创建之后触发
- componentWillReceiveProps——Component的props属性变化的时候触发
- componentWillUnmount——Component销毁之前触发
Events
- onClick
- onSubmit
- onChange
React生命周期
实例化(Initializing)
一个组件类首次实例化的时候,会依次调用下面的方法:
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
对于该组件类的所有后续应用,下面的方法会被依次调用:
- getInitialState
- componentWillMount
- render
- componentDidMount
可以看到,此时已经不再调用getDefaultProps。
存在期(Updating)
当组件在使用过程中,组件的状态会发生变化,会触发不同的方法:
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
销毁期(Unmounting)
- componentWillMount
http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/
http://blog.andrewray.me/reactjs-for-stupid-people/
http://busypeoples.github.io/post/react-component-lifecycle/