07react

1.react库的特性

react是用来构建用户界面的JavaScript库，它提供UI层面上的解决方案，它并不是个完整的框架，它需要配合其他库组成一个框架。

声明式编程：

• 声明式编程：理解为通过代码告诉计算机我需要的是什么，让计算机想出如何去做

• 命令式编程：理解为通过代码告诉计算机要做什么

  举例：假如要实现一个按钮改变class属性的功能

  命令式编程：DOM编程，你要指挥浏览器，第一步找到对应的节点，再创建一个element,然后为其添加class属性，添加点击事件，最后将button元素添加进节点里。每步操作都是命令式的

  声明式编程： 先定义一个Button组件，再render函数里返回一个jsx告诉ReactDom我要渲染一个Button,不用关心render函数在什么时候执行，button内部的属性是如何更新的。

组件化：react提供了全新的语法扩展jsx，将渲染逻辑和ui逻辑结合在一起。它能大幅度的提高代码的复用率。同时使用了mvc模型改变了传统代码的编写逻辑。将数据、ui视图、逻辑控制分开，各司其职，达到效率最大话。

一次学习，随处编写：可以在很多地方使用react语法来编写代码：React+ReactDom写pc React+React Native写手机app等。React可以配合不同的渲染器编写不同平台的应用

2.什么是jsx

jsx是react定义的js的语法扩展，使用jsx可以在js里写类似html的代码。保存jsx变量的东西就是react元素。本质上jsx在经过babel编译后，是通过调用react.createElement方法创建react元素。jsx可以极大的减少我们使用react.createElement编写的代码。理解（披着html的对象），jsx里面嵌套的元素越多，产生的对象越复杂。

3.react组件的理解

react组件本质上是一个函数，它被用来生成一个react元素并返回。

类型：

• 函数组件:为一个函数，函数名首字母大写，并将组件的属性通过props传入函数，返回React元素
• 类组件：继承子react.component，在内部定义render方法，render返回react元素

react希望react组件是一个纯函数，即传入相同的props只会返回相同的结果。我们是不可以在组件内部修改传入的props的值。react组件理解成一个数学模型的话就是F(state,props) = UI，组件可以维护自己内部的状态state，可以通过更新state来重新渲染ui。

4.react组件的生命周期

react组件的生命周期分为三个阶段：挂载时，更新时，卸载时

• 在挂载时，首先会调用constructor构造函数，生成组件对象，其次调用render函数返回React元素，交给reactDOM渲染，最后调用componentDidMount,在这里进行一些网络请求数据等操作
• 更新时，触发更新的条件是，组件传入了新的props或调用的setstate方法改变了组件的状态。调用render函数返回新的react元素。在组件更新后，调用componentDidUpdate,作用和上面的componentDidMount类似
• 卸载时，调用componentWillMount,卸载组件，在这里做一些清除定时器等操作

5.react组件的状态管理