react学习心得（1）

ReactDOM.render()  实例化根组件，启动框架，注入标记到原始的DOM元素中

getInitialState() 在生命周期里只执行一次，并设置组件的初始状态

componentDidMount 是一个当组件被渲染时被react自动调用的方法

props  是一种从父级传递数据到子级的方式

写一个react demo的大致步骤：

1.把UI拆分成一个组件的层级

    对模型进行拆分，明确你将要构建一个组件，这些组件的层级关系怎样

    就像：

•       组件1      
  
• •       组件2
  •       组件3
  • • 组件3.1
    • 组件3.2

    要把组件拆分到最后

2.生成一个静态的react页面

    对每个组件进行React.createClass({...})构建，实现一个静态的可呈现的页面

    组件可以自顶向下或者自底向上构建

    这些组件只有render()方法

    组件之间通过props传递数据

     React的单向数据流（单向绑定）使一切保持了模块化和快速

    

3.确定最小的state表达集合

    进行UI交互就需要state来动态显示，所以需要确定哪些集合需要使用state（比如，文本框、单击按钮之类的）

        有三个方法：

1.                 它是从父级通过props传递过来的么？是的话，就不是state
2.                 它是随时间变化的么？如果不是的话，那就不是state
3.                 它是能够通过其他组件里的state或者props计算出来的么？如果是，那就不是state

4.确定state应该存放于什么地方

    明确react在组件层级中总是单向流动数据的

    根据：

1. 确定哪些组件需要基于state渲染
2. 找到需要state渲染的所有组件所共有的一个组件，一般都是这些组件之上的组件
3. 要么是共同拥有，要么就是其他在层级里更高级的组件拥有这个state，反正要满足state表达集合（文本输入框、按钮等）值的改变对整个页面能产生交互
4. 如果找不到某个组件可以让state表达集合有意义的拥有state，那就简单的创建一个组件来控制住state，并把创建的这个组件添加到所有共同拥有这个state的组件更高的层级上

5.添加反向数据流

    添加方法（顶层组件的方法，用于底层函数的回调函数），使state表达集合能够正确的渲染UI

    由于组件应该只更新自己拥有的state，每当state更新时回调函数就会被调用，然后再回调函数中便会启用 setState()，然后应用将会被更新。