React[3]

[HuangHongRui]

Component作为所有组件的基类.

使用Es6语法创建一个叫 Rui 的组件类. Rui 的父类就是 Component : class Rui extends Component {}

当尝试删除 import React from 'react' 会报错. 报错信息含义： 在使用JSX的范围内必须要有React。

[ 在使用 JSX 的代码文件中，即使代码中并没有直接使用 React 也一定要导入React..因为JSX 最终会被转译成依赖于 React 的表达式

[HuangHongRui]

JSX 是Js语法扩展， 使开发者可以在Js中编写像HTML的代码。

JSX & HTML 之间的不同之处：

1. 在JSX中使用的‘元素’不局限于HTML中的元素，可以是任何一个React组件。
2. React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否是大写。

3. 在JSX中可以通过onClick这样的方式给一个元素加一个事件处理函数。

   onClick 挂载的每个函数，都可以控制在组件范围内，不会污染全局空间 . 前面例子组件使用了 onClick ，但并无产生直接使用 onclick[是onclick，非onClick] 的HTML..

而是使用了 事件委托 的方式处理点击事件， 无论有多少个onClick出现， 最后都只在 DOM 树上添加一个事件处理函数，挂在最顶层的DOM上节点上。

所有的点击事件都被这个事件处理函数捕获，然后根据具体组件分配给特定函数， 使用事件委托的性能当然要比为每个onClick都挂载一个事件处理函数要高.

React控制了组件的生命周期....在unmount的时候自然能够清楚相关的所有事件处理函数 [不存在泄露内存]

[HuangHongRui]

以前用 HTML 来代表内容， 用CSS代表样式， 用Js来定义交互行为， 这三种语言分在三种不同的文件里，实际只是把不同技术分开管理， 而不是逻辑上的 “分而治之”。

[HuangHongRui]

在React组件中除了 定义交互行为， 也可以在组件中定义样式，

定义一个 对象 ，然后在 JSX 中 赋值给顶层div的style属性， React 的组件可以把JavaScript HTML Css 的功能在一个文件中实现真正的组件封装。

[HuangHongRui]

分解 React 应用

React应用 依赖一个很大很复杂的技术栈， 之前使用 create-react-app 避免在一开始就费太多精力配置技术栈.. 现在了解一下这个技术栈。 在 package.json 中 ：

可看到 所有配置文件都藏于 node_modules / ereact-scripts 目录中.. 可以选择进入目录直接看源码，也可以使用 eject 方法看看原理。

build 可以创建 生产环境优化代码 test 用于单元测试 eject 把潜藏在 react-scripts 中的一系列技术栈配置都 ’弹射‘ 到应用的顶层， 好让我们可以研究这些配置细节，而且可以更灵活的定制应用的配置。 【但是，此命令不可逆，就像战斗机飞行员选择’弹射‘出驾驶舱，等于放弃该架飞机，不可能回得去，所以，执行eject前，最好备份】

执行 npm run eject 后， 当前目录会增加两个目录.

• 一个 scripts ，
• 另一个 config
• 同时，package.json 内容也将发生改变..

[HuangHongRui]

React 的工作方式

React 的工作方式把开发者从繁琐的操作中解放出来， 开发者只需要着重 ’我想要显示什么‘ 而不用操心 ’怎么去做‘。

这种思维方式，对于一个大型的项目，这种方式编写的代码会更容易管理， 因为React应用要做的就是渲染， 开发者关注的是渲染成啥样，无需关心实现增量渲染。

React的理念，归结为一个公式： UI = render（data）

公式含义：

• 用户看到界面（UI），
• 是一个函数（render）执行的结果，
• 只接受数据（data）作为参数。

【这是一个纯函数： 没有任何副作用，输出完全依赖输入的函数，两次函数调用如果输入相同，得到的结果也绝对相同，最终的用户界面，在render函数确定的情况下完全取决于输入数据。】

对于开发者而言，重要的是区分哪些属于 data， 哪些属于 render， 想要更新用户界面， 要做的就是更新 data， 用户界面自然做出响应， 所以React实践的也是 响应式编程 的思想。

[HuangHongRui]

【Virtual DOM】

React 应用 是通过重复渲染来实现用户交互。

React利用 Virtual DOM ，让每次渲染都只重新渲染最少的DOM元素 了解 Virtual DOM 前，需要先了解 DOM，DOM是结构化文本的抽象表达形式。

Web前端开发关于性能优化有一个原则：尽量减少DOM操作

JSX看起来很想是一个模板，但是最终会被 Babel 解析为一条条创建 React组件 或者 HTML 的语句， React并不通过这些语句直接构建DOM树， 而是先构建 Virtual DOM。

• DOM树是对HTML的抽象
• Virtual DOM 是对DOM树的抽象

Virtual DOM 不会触及浏览器的部分，只存在于Js空间的树形结构， 每次自上而下渲染 React 组件时，会对比这一次产生的 Virtual DOM 和上一次渲染的 Virtual DOM， 对比发现差别，然后修改真正的DOM树时，就只需触及差别中的部分即可。

[HuangHongRui]

【React 工作方式的优点】

使用 React ，可避免代码互相纠缠这样复杂的程序结构， 无论何种事件，引发的都由 React组件的重新渲染， 至于如何只修改必要的DOM部分， 完全交给 React去操作，开发者无需关心。

React 利用函数式编程的思维 来解决用户界面渲染问题， 最大的优势在于开发者的效率会大大提供， 开发出来的代码可维护性和可阅读性也大大增强。

React等于 强制所有组件都按照这种由数据驱动渲染的模式来工作， 无论应用的规模多大，都能让程序处于可控范围。

[HuangHongRui]

• React 最主要理念之一： 基于组件来开发应用

• React利用声明式语法，让开发者专注于描述用户界面“显示什么样子”，而不是重复思考“如何显示”这样可大大提高开发效率，也让代码更易于管理。

• React虽是通过重复渲染来实现动态更新效果，但借助 Virtual DOM技术，实际上这个过程并不牵涉太多的DOM，所以渲染效率很高。