React 程序是由组件组成的,回顾一下模块,组件化
模块化和组件化
模块:
- 理解:向外提供特定功能的js程序,一般就是一个js文件
- 为什么要拆分模块:随着业务逻辑增加,代码越来越多且复杂
- 作用:复用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 函数是开始调用一次 当数据改变时调用,就是数据更新告诉视图要更新了,数据双向绑定
方法就是点一次执行一次
写下来 明显的感觉就是比更简洁一些