React 数据流与状态控制－props与sate的区别

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: