react07-组件

react中全部都是局部组件（函数，类，hooks组件）

函数组件

• 一般组件都是放到src下的view文件夹中
• 每创建一个jsx文件，在该文件中定义一个方法，返回jsx元素、jsx视图、virtualDom对象 ： 这就是创建一个函数组件
• 调用： 按照es6的规范，调用 import *** from “路经” ，调用时可以忽略文件后缀名，倒入后，当作标签使用即可,调用的组件可以设置（传递）各种属性
  在调用组件的时候可以把一些数据和信息 基于props传递给组件 ，组件的双闭合调用可以传递子节点，在传递给函数的props中会增加一个children属性
• 注意：如果传递的属性值不是字符串就要使用 {} 来嵌套数据

函数组件的渲染机制

基于 Babel-preset- react- app ：把调用的函数组件转换成create Element格式

然后执行 createElement方法创建出虚拟dom对象
注意：函数组件中的type不再是标签字符串了，而是一个方法，
基于 render 方法将虚拟dom转变成真实dom ：

• 此过程中： 执行定义的函数方法
• 把virtualDom中的props传递给函数—> demoOne(props) : 这就是父传子
• 接收函数返回的结果，也就是函数组件中返回的jsx元素（当前元素的虚拟dom）
• 基于render方法将返回的虚拟dom转变成真实dom，插入到#root容器中

函数组件的应用

属性props的处理

• 调用组件时传递进来的属性是只读的，只能获取不能修改 ： 因为props对象被冻结了
• 但可以修改结构后的属性值，只要不直接修改 props 中的属性
• 作用： 父组件调用子组件时，可以基于属性，把不同的信息传递给子组件，子组件接收响应的属性值，呈现不同的效果，提过复用性
• 可以利用 prop-typs库 对传递进来的属性做规则校验

也可以看react官网，用上面的方法

对象三大规则：冻结，密封，不可扩展