react18中的函数组件底层渲染原理分析

news2024/10/26 16:32:54

react 中的函数组件底层渲染原理

react组件没有局部与全局之分，它是一个整体。这点跟vue的组件化是不同的。
要实现 react 中的全局组件，可以将组件挂在react上，这样只要引入了react，就可以直接使用该组件。

函数式组件的创建

创建一个函数，函数中返回一个jsx或者jsx元素，virtualdom。
基于 es6 的模块导入导出方式，将函数作为模块的导出.可以忽略后缀名。

<Component />
<Component>...</Component>

命名：首字母大写，大驼峰命名。小写字母开头，编译器会认为这是一个标签，编译器也会报错。

关于 props 属性的细节知识

函数组件不能使用this关键字。
函数组件不能使用生命周期钩子。
子组件的props属性，不能直接修改。
获取子组件的props属性，需要使用props.xxx。

对象的`冻结`，`密封`和`不可扩展`

被冻结的对象，不能添加、删除或修改其属性。也不能劫持对象。Object.defineProperty方法不能修改这些属性。Object.isFrozen方法用来检测对象是否被冻结。
被密封的对象的属性，可以修改值，但是不能添加、删除。但不能劫持对象。Object.isSealed方法用来检测对象是否被密封。
不可扩展的对象，除了不能新增成员，其他操作都正常。Object.isExtensible方法用来检测对象是否可以扩展。

总结: 被冻结的对象，既是不可扩展的，也是密封的。被密封的，也是不可扩展的。

所以，我们在组件内部修改props属性时，需要先拷贝一份，然后才能修改。否则会报错。

组件的默认值

函数组件.defaultProps属性，可以设置组件的默认值。

function Jsx({ name }) {
  return (
    <div>
      Jsx
      <hr />
      <p>{name}</p>
    </div>
  );
}

Jsx.defaultProps = { name: "zs22222222" };
export default Jsx;

在这里插入图片描述

函数的类型校验

函数组件.propTypes属性，可以设置组件的默认值。需要我们安装prop-types库。
跟Component组件一样，需要使用import导入。

import PropTypes from "prop-types";
Child.defaultProps = { name: "zs22222222", age: 18 };
Child.propTypes = {
  name: PropTypes.string,
  age: PropTypes.oneOfType([
    PropTypes.number.isRequired,
    PropTypes.string,
    PropTypes.bool,
  ]),
};

函数组件中的插槽处理

插槽的作用，就是将父组件中的内容，原封不动的传递给子组件。想办法让组件更加灵活，具有更强的复用性
- 数据值用属性
- html 片段用插槽
- children 属性，传递子组件的jsx元素,是数组的情况下，要使用下面的方式来接收，也可以使用React.Children里面的方法来进行处理
- 插槽内容可以根据不同的需求，放到不同的位置。

静态组件和动态组件

function Vote() {
  function handleSubmit() {}
  function handleCancel() {}
  return (
    <div className="vote-box">
      <div className="header">
        <h2 className="title">标题</h2>
        <span>15人</span>
      </div>
      <div className="main">
        <p>支持人数: 10人</p>
        <p>反对人数: 5人</p>
      </div>
      <div className="footer">
        <button onClick={handleSubmit} className="btn btn-primary">
          支持
        </button>
        <button onClick={handleCancel} className="btn btn-danger">
          反对
        </button>
      </div>
    </div>
  );
}
export default Vote;

第一次渲染组件，执行函数，产生一个私有的上下文，把解析出来的 props 包括 children 属性，保存到上下文,并冻结了props属性，不可修改。返回一个jsx元素的vdom。渲染jsx元素，生成virtualdom。
当我们点击按钮，再次渲染组件时
修改上下文中的变量，私有作用于发生了变化，但是视图不会更新。所以称为静态组件。
除非在父组件中，修改了子组件的props属性，才会重新渲染。
动态组件:实际项目中，我们会遇到在第一次渲染组件完成后，需要基于组件内部的状态变化，让组件可以更新，以呈现出不同的页面效果。 ====> 动态组件(class 组件，hooks 组件)
2、初始化状态
状态:后期修改状态，可以触发视图的更新
需要手动初始化，如果我们没有去做相关的处理，则默认会往实例上挂载一个state，初始值是null =>this,state=null
手动处理:

state = {
  xxx:xxx
}

修改状态，控制视图更新this.state.xxx=xxx :这种操作仅仅是修改了状态值，但是无法让视图更新想让视图更新，我们需要基于React.Component.prototype提供的方法操作:「推荐」

1 this.setstate(partialstate)既可以修改状态，也可以让视图更新
partialstate:部分状态

 this.setstate({
	xxx:xxx
})

2 this.forceUpdate()强制更新

在这里插入图片描述

forceUpdate在类组件中生效的使用方法，当你必须使用这个api页面才更新的时候，说明你的业务代码中就已经出现了问题了。如果我们是基于 this.forceUpdate()强制更新视图，会跳过 shouldcomponentUpdate 周期函数的校验，直接从willUpdate开始进行更新，这时视图就一定会更新。

import { Component } from "react";
class Vote extends Component {
  state = {
    oppPerson: 0,
    aggPerson: 0,
  };
  handleSubmit() {}
  handleCancel = () => {
    this.state.oppPerson++;   //这种使用是不对的，
    this.forceUpdate();
  };
  render() {
    const { oppPerson, aggPerson } = this.state;
    return (
      <div className="vote-box">
        <div className="header">
          <h2 className="title">标题</h2>
          <span>15人</span>
        </div>
        <div className="main">
          <p>支持人数: {aggPerson}人</p>
          <p>反对人数: {oppPerson}人</p>
        </div>
        <div className="footer">
          <button onClick={this.handleSubmit} className="btn btn-primary">
            支持
          </button>
          <button onClick={this.handleCancel} className="btn btn-danger">
            反对
          </button>
        </div>
      </div>
    );
  }
}
export default Vote;