react入门基础

react三大特点：

1.虚拟DOM：

     当数据变化时，采用优化算法diff，对比virtual dom差异，精准更新dom.

2.组件化：

a.封装起来具有独立功能的UI部件，将UI上每一个功能相对独立的模块定义成一个组件，通过组合或者嵌套的方式构成打的组件，最终完成整体的UI的构建

b.对于MVC，开发者将三者定义成不同的类，实现了表现，数据，控制的分离，从技术的角度对UI进行了拆分，实现松耦合

c.将UI分成不同的组件，每个组件都独立封装，每个组件只关心自己的部分和逻辑，彼此独立

React认为一个组件具有如下的特征：

1.可重组 2.可重用 3.可维护

React三剑客：

1.react.js:

实现react核心逻辑，切与具体的渲染引擎无关，从而可以跨平台公用。如果应用要迁移到react native，这一部分逻辑是不需要修改的

2.react-dom.js:

包含了具体的DOM渲染更新逻辑，以及服务端渲染的逻辑，这部分与浏览器相关。

3.browser.js：

将JSX语法转换为JS代码

React两件套：

React.createClass():注册一个组件，组件包含render函数

ReactDOM.render()：react基本用法，将模板转换成HTML语言，并插入DOM节点

JSX:

1.JSX:

    javascript XML ,它使用XML标记来创建虚拟DOM和声明组件。

2.JSX语法

    babel来转换

3.JSX优点：

    a.可以使用熟悉的语法仿照HTML来定义虚拟DOM

    b.程序代码更加直观

    c.于JavaScript之间等价转换，代码更加直观

4.JSX中的表达式

    要使用{ }，表达式支持三元和二元运算符

5.JSX上的数组输出：

    (循环数组的内容到JSX中)利用es6中的map进行循环，需要使用key值。

6.数组中的JSX：

    在数组中可以直接使用JSX语法

React提供的两个对象：

react提供的React对象 react-dom提供的ReactDOM对象

获取真实的DOM节点

组件不是真实的DOM节点，是存在于内存之间的一种数据结构，就做虚拟DOM，只有当它插入文档以后，才会变成真实的DOM，根据React设计，所有的DOM变动都先在虚拟DOM上，然后将实际发生变动的部分反映到真实DOM上，是一种DOM diff算法，可以极大性能的提高网页性能表现（React核心理念就是让开发者不去关心，当数据发生部分变化时，应该更新那部分DOM；只让开发者关注数据变化，更新的问题就交给React）

有些时候需要从组件中获取真实DOM，这是要用到ref属性（点击按钮，输入框获取焦点）

this.state

React一大创新，就是想React看成是一个状态机，一开始有一个初始状态（getInitialState),用户互动，导致状态变化，从新渲染组件。

组件被触发的两种途径：

1.来自父组件render被触发，导致子组件render

2.自组件的this.setState方法被调用

this.props

state与props的区别在于：props是不可变的，state是通过用户的交互式可变的

默认的props通过getDefaultProps()方法为props设置默认值。

props验证：使用propTypes，他可以保证我们应用组件被正确使用，React.PropTypes提供很多验证器来验证数据的有效值，当向prop传入无效的数据时，JavaScript控制台会抛出警告。验证器的类型参考网址（http://www.runoob.com/react/react-props.html）

组件的生命周期

可分为三个状态：

Mounting：已插入真实DOM；

Updating：正在被重新渲染

Unmounting：已移出真实DOM+

生命周期的方法有：

1.componentWillMount：在渲染前调用，在客户端也在服务端。

2.componentDidMount：在第一次渲染后调用，之后组件已经生成了DOM结构，可以通过this.getDOMNode()进行访问，如何想和其他的JavaScript框架一起使用，可以再这个方法中调用setTimeout,setIntervel或者发送AJAX请求等操作（防止异步操作阻塞UI）

3.componentWillReceiveProps：在一个组件收到一个更新的prop时被调用，这个方法在初始化render时不被调用。

4.shouldComponentUpdate：返回一个布尔值，在组件收到新的props、state但是还没有render前调用

5.componentWillUpdate：在组件收到一个新的props、state没有被render之前调用，初始化不会被调用。

6.componentDidUpdate：在组建完成更新后立即调用，初始化不会被调用

7.componentWillUnmount：在组件从DOM中移除的时候被立即调用。

React AJAX

React组件的数据可以通过componentDidMount方法中的AJAX来获取，当从服务器端获取数据时可以存储在state中，在用this.setState方法重新渲染UI

 

 

React知识点总结：

1.一个组件要定义自己的构造函数，一定在自构造函数的第一行通过super调用父类，也就是React.Component的构造函数

2.在构造函数中给成员函数绑定了当前的this环境，因为ES6环境够早的组件并不自动给我们绑定this到当前的实例对象。

 

PS：以上知识点均为个人整理，如有借鉴，转发，请标明出处。