从重点来了解一下react（无案例版）

1、什么是react?

react是一个h5的前端框架，在这个框架中，提供了画页面，请求数据，渲染数据一整套服务，使用react技术栈，可以做一个完整的前端项目。

前端领域有三大框架：vue react ng；

react是Facebook内部的一个javascript类库。于2013年5月开源，可用于创建用户界面。

2、正确认识react

React不是mvc框架，它只是一个库，只专于视图

React是一种思想，倡导“learn once，write anywhere”，分web版的React.js和原生App的React Natvie

react一般指react、react.js、react.native,react是一种思想，react.js和react.native是react思想的具体体现

React.js就是进行webapp的开发

React native，简称rn，用于开发接近原生app。（iso和android原生的app）

react技术栈：react.js + react-router + redux +es6 + webpack + fetch

React的核心思想：

简单：只需要表达出应用程序在任一个时间点应该长的样子，当底层的数据变了，React会自动处理所有用户界面的更新。（数据驱动dom）

声明式：React采用声明范式，可以轻松描述应用。（都是使用标签的形式）

React特点

1、组件化 2、单向数据流 3、虚拟DOM 4、状态机

将react和vue进行对比：

相同点

都是JavaScript的UI框架，都有自己的技术栈
组件化
Virtual DOM
数据驱动DOM

不同点

模板 vs JSX
状态管理（state） vs 对象属性（data）
维护团队

3、jsx

在vue中，使用了模板语法，react中，没有任何的模板语法，可以使用原生的js或者jsx来输出组件的结构。

JSX = JavaScript+XML，一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，但是使用JSX可以提高组件的可读性，因此推荐使用JSX。

Xml，是extensible markup language，可扩展的标记语言。我们在使用react.js进行web开发的时候，通常就使用html的标签来构建结构

jsx的本质

任何html元素，都可以用固定的js对象结构来描述

JSX的优点

简单，任何熟悉基于XML的开发人员都能轻松掌握JSX
更加直观，可读性强
更加语义化

关注分离点，JSX以干净的方式确保标签与业务逻辑相分离

4、react中的列表渲染

var book={react,vure,ng};

var newBook=book.map(item=><li>{item}</li>)

<ul>
   {newBOOK}
</ul>

 
复制代码

使用map是react中列表渲染的标准写法

5、组件化

1、所谓组件，即**封装起来的具有独立功能的UI部件。

所谓具备独立功能，通常包括：

结构
数据（及其数据的变化）
表现

2、组件化思想

React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。

组件的好处:可组合、可重用、可维护

6、定义组件

在react中，定义组件有三种方式：

React.createClass
使用es6的class关键字，继承React.Component组件
直接使用函数定义无状态组件

7、渲染和使用组件

渲染组件，通常是指将某个组件挂载到页面中的某个dom节点上。

此时，需要使用ReactDOM.render方法。

格式：ReactDOM.render（组件实例对象，挂载dom节点）

其中：

组件实例对象我们直接使用jsx的语法即可，比如，

挂载dom节点，必须确保使用原生的js方式来获取dom节点，可以使用的getElementById，getElementsByTagName，querySelector。

在一个应用中，通常有且仅有一个根组件节点，所以，通常只需要调用一次ReactDOM.render

8、state

react是一个状态机，状态使用state来实现。state用来确定每一个元素的视图状态，每一个React组件都可以拥有自己的state。在进行react开发的时候，核心就是要确定每个组件相应的状态，然后去管理这些状态。组件按照状态来进行渲染，状态一旦发生变化，组件就会更新。

state的使用

定义初始状态，使用getInitialState方法
**获取状态，使用this.state.**状态名
设置状态，使用this.setState方法

A. 定义初始状态

使用getInitialState方法

在这个方法中，必须要使用return 返回一个对象，对象中定义的就是组件的状态。

B. 获取状态

使用this.state.状态名

在当前组件中，使用this.state获取当前组件所有的状态。

C. 设置状态

使用this.setState方法

设置状态，或称为修改状态，比较特殊：

必须使用this.setState方法

必须重新给状态赋值

9、props

props表示属性，是用来实现父子组件通信的。父组件向子组件传递的，可以传递数据和方法

设置属性的默认值

由于Father组件在引用Son组件的时候，传递了一个age属性，所以，默认的属性值就被覆盖了。

10、组件的生命周期

组件从创建、渲染到卸载，整个的完整的周期，就是组件的生命周期。生命周期在组件的具体体现就是一些钩子函数。

钩子函数是指，给开发人员提供了一个可以编写代码的机会。我们可以利用生命周期的钩子函数，实现某些特定的功能。

在react.js中，可以将生命周期分为三个阶段：

挂载阶段
更新阶段
卸载阶段

shouldComponentUpdate是react进行性能优化的关键点。

render既在挂载阶段，也在更新阶段

11、虚拟DOM

虚拟dom是由react第一个提出的。

虚拟DOM则是在DOM的基础上建立了一个抽象层，我们对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。

虚拟dom，具体来说就是jsx，如下

转载于:https://juejin.im/post/5d08b81ee51d454f73356d58

react的基本使用（简略）