7-1 React虚拟DOM概念

虚拟DOM的结构，为什么快？如何 实现？

只是对需要变更的模块进行改变，其他都没有改变，所以效率很快。

7-2 React组件

组件的一个优势，就是可以复用，比如下面：

红框中都可以做成组件的形式，下一次就可以快速复用。

在index中，使用组件，在组件header组件中，导入react和reactDom，定义一个组件Header如下：

第二行添加 export default

在index.js中引入并使用组件：

3 导入组件ComponentHeader组件，5定义一个Index组件，这个组件在8行引用组件。13行 通过ReactDOM往Index.html中使用添加渲染Index组件。

注意在return返回里面只能有一个节点，两个会 报错。可以用一个div包裹一下。

总结：

7-3 React多组件嵌套

以下伪代码形式写一下：

以上三个不同组件的定义

7-4 JSX内置表达式

三元表达式的使用：

15行，如果userName为空，则显示前面的，否则显示后面的。

true 或者false的显示。如图16行显示，disabled是组安检是否显示的设定，根据数据绑定，boolInput可以控制按钮是否显示。注意数据绑定是括号，不是引号，否则会出问题。

注释的写法：  {/*  */}\

18行，解析html的时候比较有用，第8行定义一个html，中间有一个空格，经常用&nbsp 代表空格，但是在页面解析的时候，会直接显示出来。

可以对&nbsp进行一个Unicode的转码，转码之后就没问题了。 var html = "IMOOC&#32LESSON";

或者用19行的方法，不过不建议。ps不用管。可能存在xss攻击。

总结

7-5 生命周期

页面都有诞生到挂了，所以像一个生命周期。

初始化的时候，有一个生命周期的

组件初始化的时候，会有一个获取默认属性的生命周期函数，再往下会有获取初始State的函数，然后render等等。第一次迪调用和第二次是不一样的。生命周期函数，就像一个钩子。这是一个流程，我们想做的事情，都放在这些流程函数中。比如组件将要加载的时候，可以做一些初始化的工作，比如下载图片啦，判断用户之前有没有登录啊，如果登录过了使用一种界面，否则使用另外一种。判断的逻辑都可以放在这里面做。以下相同逻辑的流程图：

可以将一些要做的事情，放在组件将要加载和已经加载的函数中使用。

这个页面在将要加载和已经加载之后，如上图：

如果Index页面，嵌套BodyIndex组件，那么执行顺序是什么？下面测试一下：

如下可以看出来执行顺序：