通过一个todolist 大概的了解React的 组件的书写过程，下面是一个todolist的代码：
import React from 'react';
// TodoList 组件是一个整体的组件，最终的React渲染也将只渲染这一个组件
// 该组件用于将『新增』和『列表』两个组件集成起来，并且存储 todolist 的数据
var TodoList = React.createClass({
// 初始化数据
getInitialState: function () {
return {
todolist: []
};
},
// 接收一个传入的数据，并将它实时更新到组件的 state 中，以便组件根据数据重新render
// 只要改变了 state ，react自动执行 reader 计算
handleChange: function (rows) {
this.setState({
todolist: rows
});
},
render: function () {
return (
<div>
{/*
集成 TypeNews 组件，传入两个属性 onAdd 和 todo
todo - 将todolist的数据传入到组件，当新增时，更新todolist数据
onAdd - 将 handleChange 函数传入到组件，新增时，用它来处理最新的todolist数据
*/}
<TypeNew onAdd={this.handleChange} todo={this.state.todolist} />
{/*
集成 ListTodo 组件，传入两个属性 onDel 和 todo
todo - 将todolist的数据传入到组件，当删除时，更新todolist数据
onDel - 将 handleChange 函数传入到组件，删除时，用它来处理最新的todolist数据
*/}
<ListTodo onDel={this.handleChange} todo={this.state.todolist} />
</div>
);
}
});
// TypeNew 组件用于新增数据，它需要 todo 和 onAdd 两个属性，上文已经提到过
// 基本逻辑是：当从 input 中获取数据时，将新数据 push 到todo中，
// 然后使用 onAdd 调用 TodoList 的 handleChange 来更新state，然后react自动render
var TypeNew = React.createClass({
handleAdd: function (e) {
e.preventDefault();
// 通过 refs 获取dom元素，然后获取输入的内容
var inputDom = this.refs.inputnew.getDOMNode();
var newthing = inputDom.value.trim();
// 获取传入的todolist数据
var rows = this.props.todo;
if (newthing !== '') {
// 更新数据，并使用 onAdd 更新到 TodoList 组件的 state 中
rows.push(newthing);
this.props.onAdd(rows);
}
inputDom.value = '';
},
render: function () {
return (
// form submit 时，触发 handleAdd 事件
<form onSubmit={this.handleAdd}>
<input type="text" ref="inputnew" id="todo-new" placeholder="typing a newthing todo" autoComplete="off" />
</form>
);
}
});
// ListTodo 组件用于展示列表，并可以删除某一项内容，它有 noDel todo 两个属性，上文已经提到过
// 它的基本逻辑是：遍历 todo 的内容，生成数据列表和删除按钮
// 对某一项执行删除时，想将 todo 中的数据删除，
// 然后通过 onDel 事件调用 TodoList 的 handleChange 来更新state，然后react自动render
var ListTodo = React.createClass({
handleDel: function (e) {
var delIndex = e.target.getAttribute('data-key');
// 更新数据，并使用 onDel 更新到 TodoList 的 state 中，以便 React自动render
this.props.todo.splice(delIndex, 1);
this.props.onDel(this.props.todo);
},
render: function () {
return (
<ul id="todo-list">
{
// {/* 遍历数据 */}
this.props.todo.map(function (item, i) {
return (
<li>
<label>{item}</label>
<button className="destroy" onClick={this.handleDel} data-key={i}>delete</button>
</li>
);
}.bind(this)) // {/* 绑定函数的执行this - 以便 this.handleDel */}
}
</ul>
);
}
});
export default TodoList;
React提倡所有的数据都是由父组件来管理，通过props的形式传递给子组件来处理——要点。
做一个todolist页面需要一个父组件，两个子组件。父组件当然就是todolist的『总指挥』，两个子组件分别用来add和show、delete。用通俗的方式讲来，父组件就是领导，两个子组件就是协助领导开展工作的，一切的资源和调动资源的权利，都在领导层级，子组件配合领导工作，需要资源或者调动资源，只能申请领导的批准。数据完全由父组件来管理和控制，子组件用来显示、操作数据，得经过父组件的批准，即——父组件通过props的形式将数据传递给子组件，子组件拿到父组件传递过来的数据，再进行展示。
另外，根据React开发的规范，组件内部的数据由state控制，外部对内部传递数据时使用 props 。这么看来，针对父组件来说，要存储todolist的数据，那就是内部信息（本身就是自己可控的资源，而不是『领导』控制的资源），用state来存储即可。而父组件要将todolist数据传递给子组件，对子组件来说，那就是传递进来的外部信息（是『领导』的资源，交付给你来处理），需要使用props。
而todolist的数据是由父组件来管理的，子组件不能说改就改呀，得申请父组件的允许和同意呀。因此，我们需要让父组件开放一个可以修改数据的接口，然后将这个接口作为props传递给子组件，让其能修改数据。子组件调用父组件的接口对todolist数据进行修改了之后，相当于修改了React对象的state数据，此时就会触发React的自动更新（就是通过virtual-dom对比，然后更新真实的dom那一套），React会将UI实时随着数据更新。