Day02 - React 第二天

React 程序是由组件组成的，回顾一下模块，组件化

模块化和组件化

模块：

1. 理解：向外提供特定功能的js程序，一般就是一个js文件
2. 为什么要拆分模块：随着业务逻辑增加，代码越来越多且复杂
3. 作用：复用js，简化js的编写，提高js的运行效率

模块化：当应用的js都以模块来编写的，这个应用就是一个模块化的应用

组件化：当应用是以多组件的方式实现，这个应用就是一个组件化的应用

总结：就是业务逻辑拆开 可以复用 简洁明确

React 定义了两种定义组件的功能函数式组件 和 类式组件

函数式组件：

再返回时必须以标签形式 并且满足jsx语法 首字母大写

React为严格模式下 this为undefined

严格模式：

一种在ECMAScript 5中引入的更加严格的语法规则，旨在消除一些JavaScript代码中的一些不安全之处，提高代码质量。

严格模式全局作用域中函数的this指向的是undefind，同理react的函数式组件this指向undefind

类式组件

类式组件中因为继承 react 内置类 所以不一定要写构造器

类式组件方法挂载到原型对象上，通过实例对象点出方法

众所周知 需要new 才会有实例 那么这里的实例在哪里？

打开页面的控制台，查看我们所写的类的原型

原型上有所写的方法 说明已经有这个实例

在挂载到页面上时 react 已经帮我们new 了一个实例

类中的

    ReactDOM.render(<Perosn />, document.getElementById("app"));

    /*

        //1.React解析组件标签，找到相应的组件。

       //2.发现组件是类定义的，随后new出类的实例，通过实例调用到原型上的render方法

       // 3. 将 render返回的虚拟DOM转化为真实DOM,随后呈现在页面中

    */

类的方法默认是严格模式的 所以和平时一样 react通过创建的实例对象调用类中的方法

类式组件中的this就是指向实例对象

State 组件实例的三大核心之一

像是vue中data 返回的数据

react中的绑定事件

React 的 state 使用修改

React state 简化

State总结

详细情况都在上面截图中，稍微总结一下

和所有的面向对象编程差不多，都有相似的地方

React 构造器只执行一次 render 函数是开始调用一次 当数据改变时调用，就是数据更新告诉视图要更新了，数据双向绑定

方法就是点一次执行一次

写下来 明显的感觉就是比更简洁一些