目录
- 静态组件
- 动态组件
- 创建一个构造函数(类)
- 使用 `class` 实现组件**
- 使用 `function` 实现类组件**
静态组件
函数组件是静态组件
:
- 组件第一次渲染完毕后,无法基于
内部的某些操作
让组件更新「无法实现自更新
」;但是,如果调用它的父组件更新了,那么相关的子组件也一定会更新「可能传递最新的属性值进来」; - 函数组件具备:属性…「其他状态等内容几乎没有」
- 优势:比类组件处理的机制简单,这样导致函数组件渲染速度更快。
第一次渲染组件,把函数执行
- 产生一个私有的上下文:EC(V)
- 把解析出来的
props
「含children
」传递进来「但是被冻结了
」 - 对函数返回的JSX元素「virtualDOM」进行渲染
- 当我们点击按钮的时候,会把绑定的小函数执行:
- 修改上级上下文EC(V)中的变量
- 私有变量值发生了改变
- 但是
视图不会更新
真实项目中,有这样的需求:第一次渲染就不会再变化的,可以使用函数组件。 但是大部分需求,都需要在第一次渲染完毕后,基于组件内部的某些操作,让组件可以更新,以此呈现出不同的效果,也就是动态组件「类组件、Hooks组件(在函数组件中,使用Hooks函数)」
const Vote = function Vote(props) {let { title } = props;let supNum = 10,oppNum = 5;return <div className="vote-box"><div className="header"><h2 className="title">{title}</h2><span>{supNum + oppNum}人</span></div><div className="main"><p>支持人数:{supNum}人</p><p>反对人数:{oppNum}人</p></div><div className="footer"><button onClick={() => {supNum++;console.log(supNum);}}>支持</button><button onClick={() => {oppNum++;console.log(oppNum);}}>反对</button></div></div>;
};
export default Vote;
可以看到,点击之后,页面并没有变化
动态组件
类组件是“动态组件”:
- 组件在第一渲染完毕后,除了父组件更新可以触发其更新外,我们还可以通过:
this.setState
修改状态 或者this.forceUpdate
等方式,让组件实现“自更新”!! - 类组件具备:属性、状态、周期函数、ref…「几乎组件应该有的东西它都具备」
- 优势:功能强大。
Hooks组件「推荐」
- 具备了函数组件和类组件的各自优势,在函数组件的基础上,基于hooks函数,让函数组件也可以拥有状态、周期函数等,让函数组件也可以实现自更新「动态化」。
创建一个构造函数(类)
- 要求必须继承React.Component/PureComponent这个类
- 通常使用使用ES6中的class创建类「因为方便」
- 必须给当前类设置一个render的方法「放在其原型上」:在render方法中,返回需要渲染的视图
//import React .... : 把基于export default导出的内容获取到
//import { Component, PureComponent } .... : 不是对React对象做解构赋值,而是把基于 export function Component(){} 一个个导出的内容,做解构赋值import React, { Component, PureComponent } from "react";
这里展示在 React 中使用类和函数两种方式来实现组件。
使用 class
实现组件**
通过 ES6 class
类来定义的。Vote
类继承了 React.Component
,并通过 export default
导出。
class Vote extends React.Component {render() {return <div>投票组件</div>;}
}
export default Vote;
使用 function
实现类组件**
使用传统的 JavaScript 函数,通过 Object.setPrototypeOf
来使该函数继承 React.Component
,从而具备 React 组件的能力。
function AAA() {React.Component.call(this); // 手动绑定 React.Component 的上下文,模拟了类的构造器。this.state = { x: 10, y: 20 };
}
//设置 `AAA` 函数的原型链,使得它继承了 `React.Component` 的原型,从而具备了 React 组件的行为
Object.setPrototypeOf(AAA.prototype, React.Component.prototype); // 设置原型链AAA.prototype.sum = function () { /* 自定义方法 */ };