React 笔记

什么是JSX语法？

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。<script> 标签的 type 属性为 text/babel，这是React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是在页面中直接使用 JSX 的地方，都要加上 type="text/babel"

React.createClass()来创建一个新的React组件

例如：

var MyComponent=React.createClass({
render: function() {
return <h1>Hello world!</h1>;
      }
});+
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);

ReactDOM.render，该方法返回一颗 React 组件树，这棵树最终将会渲染成 HTML。也就是说将模板转化为HTML语言。并插入DOM节点

例如：

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);

在render中可以插入<组件名/>来调用组件，每个组件都必须要有render这个方法来输出组件

this.props可把父级传来的数据在子组件里作为 '属性' 来使用，①class 属性需要写成 className ，for 属性需要写成 htmlFor  ②style属性时要写成style={{}}是两个大括号  ③属性名要用驼峰命名法

getInitialState 方法用于定义初始状态，也就是一个对象，而this.setState可以用来修改状态值，每次修改完自动调用this.render，再次渲染组件

getDefaultProps 方法可以用来设置组件属性的默认值

PropTypes  ：React中可用PropTypes来检验参数，它作为一个机制来验证他人使用这个组件的时候，提供的参数是否合法

refs属性，可获取真实的DOM的节点

条件判断的写法  你没法在JSX中使用 if-else 语句，因为 JSX 只是函数调用和对象创建的语法糖。在 { } 中使用，是不合法的JS代码，可以把语句包裹在函数求值表达式中运用。可以采用三元操作表达式，也可以用比较运算符“||”来书写

三目运算符  return <div>Hello {this.props.name ？ this.props.name : "World"}</div>;

比较运算符  return <div>Hello {this.props.name || "World"}</div>;

函数表达式：（）有强制运算的作用

例如：var HelloMessage = React.createClass({
render: function() {
return <div>Hello {
（function(obj){
if(obj.props.name)
return obj.props.name
else
return "World"
}(this))
   }</div>;
}
    });
      ReactDOM.render(<HelloMessage name="xiaowang" />, document.body);

外括号“ ）”放在外面和里面都可以执行。唯一的区别是括号放里面执行完毕拿到的是函数的引用，然后再调用“function(){}(this)()”；括号放在外面的时候拿到的事返回值。

组件的生命周期：分为三个状态①Mounting：已插入真实 DOM  ②Updating：正在被重新渲染  ③Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

* componentWillMount()
* componentDidMount()
* componentWillUpdate(object nextProps, object nextState)
* componentDidUpdate(object prevProps, object prevState)
* componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

* componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
* shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
注释

JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。

{/* 一般注释, 用 {} 包围 */}

转载自http://www.jianshu.com/p/7e872afeae42  感谢作者大大的解读，让我的入门之路平坦了许多