本文记录在使用react实现需求过程中的一些细节性的问题。

1.标签属性的行为

react中引用自定义组件时，首先需导入组件（使用import / require），然后就能像引用原生html标签一样引用自定义组件。例如

// 假设在Sub.js中定义Sub组件
//  App.js(定义了App组件)
import Sub from './Sub.js';
ReactDOM.render(<Sub />,document.getElementById('#container'));

需要向引用的自定义组件传递参数时，直接将参数写在标签的属性中。如向Sub传递参数name的值为“Vincent”，写为：

<Sub name="Vincent" />

实际的React组件的模板中，可能同时混用两种原生html标签和自定义html：

<Card>
    <span>Hello</span>
</Card>

对于原生的html标签，向它传递属性的方法，以及对于这些属性的处理行为。和以前的经验一致（除了class需要写成className，for写成htmlFor）。传统标签是原子的，不可再分，内部也就不存在自定义逻辑，自然也就没有this.props.xxx引用。
而对于自定义标签，它背后的组件具有一个模板，从而能渲染到页面上。虽然在引用时只需一个标签，但是自定义标签不是原子的，在渲染的时候会被替换成模板中的html。向自定义标签传递的属性，无论是原生html标签的属性（name，style，id之类），还是自定义的属性（age，balabala），最后都是以this.props.xxx的方式进行访问，而不会有任何的其它处理。
以下是本人学习过程中的一个误区：

// sub.js，定义一个组件sub并导出
var Sub = ((name) => {
    return (
        <div>
            <span>this.props.name</span>
        </div>
    );
});
export default Sub;

// parent.js，导入子组件Sub
import Sub from
ReactDOM.render(<Sub name="Vincent" className="danger" />);

由于自定义组件只有一个顶层元素，我们在自定义标签中加入className属性，期望渲染出的组件（顶层元素）className="danger"。但是最后的结果却不是这样，实际结果为：

<div>
    <span>Vincent</span>
</div>

可见，向自定义标签传递的哪怕是原生的html属性，也不会以原生的办法进行处理，而是把该属性作为this.props的一个子属性。因此，这段代码需要修改Sub模板为：

<div className={this.props.className}>
    <span>this.props.name</span>
</div>

也就是手动把className绑定到到模板的顶层元素上。注意，这个顶层元素如果还是自定义组件，那么需要在这个自定义组件的模板的顶层元素中再次进行绑定，依此类推。

2.应用状态管理的一种实现方法

其余部分不定期更新