REACT初识

javaScript

基本用法

ReactDOM.render(ReactElement, DOMElement, callback);这是最基本的REACT调用的渲染方式。

其中，ReactElement可以通过下面的多种途径来实现：
1.React.createElement(type, props, children)；
2.JSX----一种REACT特有的类HTML的语法方式；

其中的type(类比HTML中的类型)可以用两种方式来实现：
    1.string，直接使用‘div’，‘span’等来表示；
    2.使用REACT中最为重要的概念：**components**来表示。通过调用React.createClass()，即可使用components.

核心组件--components

React.createClass()。

a.它有一个名字（建议components的首字母大写），可以直接在ReactDOM中使用，这样就使得它成为了一个真正的组件，用途更加广阔；
b.内部可以直接使用render函数，同时关于beforeRender、rendering、afterRender的周期都会有相应的函数，你可以很好地实现对相应时间段的控制；
c."encloses the components, returns a ReactElement(only one)."

components的参数调用

参数有两种类型，一种是props，一种是states。两种参数都遵循一个基本法则：参数只能够由父传递到子，而不能由子传递到父。

props

关于props，可以设定参数的类型（通过propTypes），它的传递方式类似AngularJS，通过HTML的tag标签来传递。

设定的原则：

All React components must act like pure functions with respect to their props.

states

关于states，只要 components内部的数据是交互的，那么该components就需要用到states。使用states的过程中，注意：
1.它的作用域只限定在React.createClass()内部，可通过函数getInitialState()来得到最初的state;也可通过this.setState(data,callback)把对应的数据放入到state中（这样就可以实现交互）；
2.被放到states里的数据，可通过this.state.params来得到；
3.若父是statable，那么当父re-render的时候，子也会被迫re-render；----这是个非常重要的点

设定的原则

Do Not Modify State Directly
State Updates May Be Asynchronous
State Updates are Merged

props与states的区别

• props是通过类似HTML的tag标签来传递的参数，states是每一次更新都设计的参数；
• state is similar to props, but it is private and fully controlled by the component;
• state只在class中才有，如果需要使用的话，那么需要变function为class（本质上就是对ES6的一种推荐）

什么时候需要用到state?

Simply ask three questions about each piece of data:

• Is it passed in from a parent via props? If so, it probably isn't state.
• Does it remain unchanged over time? If so, it probably isn't state.
• Can you compute it based on any other state or props in your component? If so, it isn't state.