React学习笔记

1、 ReactDOM.reder()

ReactDOM.render 是 React的最基本方法，用于将模板转为HTML，并插入指定的DOM节点。

2、 JSX语法

允许js与html混写。遇到HTML标签 (以 < 开头)则用HTML规则解析。

遇到代码块 (以 { 开头)就用js规则解析。

3、 组件

React通过React.createClass方法生成一个组件类像插入普通标签一样可插入到网页，需要注意的，组件类的第一个字母必须大写，而且组件类只能包含一个顶层标签。模板插入时，会自动生成一个实例，组件类都必须有自己的render方法，用于输出组件。

4、 this.props.children

this.props 对象的属性与组件的属性一一对应，除this.props.children外。它表示所有组件的所有子节点。

this.props.children 的可能值 undefined(length=0), object(length=1) array (length >1)

React提供一个工具方法React.Children来处理 this.props.children，可以用React.Children.map来遍历子节点。无需关心数据类型。

5、 ProTypes

组件的属性可以接受任意值。可以通过机制验证参数是否符合要求。例如

var MyClass = React.createClass({

protypes : {

title : React.ProTypes.string.isRquired,

//title是必须的，且值类型为string

},

render : function (){

return

{this.props.title}

}

})

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

6、 获取真实的DOM节点。

根据React的设计，所有的DOM变动，都先在虚拟的DOM上发生，然后再将实际发生变动的部分，反应在真实的DOM上。这个算法叫 DOM diff 提高页面的性能表现。

可以通过 this.ref.[refName]获取真实的DOM。

7、 this.state

组件类的 getInitialState 方法用于定义初始对象，这个对象可以通过this.state属性读取，this.setState 方法修改属性值，每次修改后自动调用this.render 方法再次渲染组件。

与 this.props 不同的是，this.props用于定义不发生改变的特性，而this.state会因与用户交互发生变化。

8、 组件的生命周期。

组件的生命周期分为3个状态

Mounting ：已插入真实DOM

React Components被render解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。

Updating ：正在被渲染

一个Mounted的React Components被重新render的过程。

Unmounting ：已移出真实DOM

一个mounted的React Components对应的DOM节点从DOM结构中被移除的过程。

React 为每种状态提供两个处理函数(hook函数)，will 在进入状态前调用，did 在进入状态后调用。 三种状态五中处理函数

componentWillMount()

componentDidMount()

componentwillUpdate(object nextProps,object nextState)

componentDidUpdate(object nextProps,object nextState)

componentWillUnmount()

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

componentWillReceiveProps(object nextProps) 已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps,object nextState)

组件判断是否重新渲染时调用

本文来源：https://www.2haoxitong.net/k/doc/b02a681376232f60ddccda38376baf1ffc4fe3d7.html