React 基于状态实现对DOM控制和渲染。组件状态分为两种:一种是组件间的状态传递、另一种是组件的内部状态,这两种状态使用props和state表示。props用于从父组件到子组件的数据传递。组件内部也有自己的状态:state,这些状态只能在组件内部修改。
数据流与Props
1.1 设置props
1.2 JSX语法中的属性设置
1.3 props的传递
组件内部状态与state
Props与state的比较
- 数据流与Props
React中的数据流是单向的,只会从父组件传递到子组件。属性props(properties)是父子组件间进行状态传递的接口,React会向下遍历整个组件树,并重新渲染使用这个属性的组件。
1.1 设置props
可以在组件挂载时设置props:
var sites = [{title:’itbilu.com’}];
也可以通过调用组件实例的setProps()方法来设置props:
var sites = [{title:’itbilu.com’}];
var listSites = React.render(
,
document.getElementById(‘example’)
)
setProps()方法只能在组件外调用,不能在组件内部调用this.setProps()修改组件属性。组件内部的this.props属性是只读的,只能用于访问props,不能用于修改组件自身的属性。
1.2 JSX语法中的属性设置
JSX语法中,props可以设置为字符串:
IT笔录
或是通过{}语法设置:
var obj = {url:’itbilu.com’, name:’IT笔录’};
{obj.name}
JSX方法还支持将props直接设置为一个对象:
var site = React.createClass({
render: function() {
var obj = {url:’itbilu.com’, name:’IT笔录’};
return: