注册网站平台,网站开发 认证,php网站权限设置,建e室内设计网全景效果图一、react基础面试题
1.react中keys的作用是什么? key是是用于追踪哪些列表被修改#xff0c;被添加或者被移除的辅助标识。 在开发过程中#xff0c;我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是…一、react基础面试题
1.react中keys的作用是什么? key是是用于追踪哪些列表被修改被添加或者被移除的辅助标识。 在开发过程中我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素从而减少不必要的元素重渲染。此外React 还需要借助 Key 值来判断元素与本地状态的关联关系因此我们绝不可忽视转换函数中 Key 的重要性。 2.react中refs的作用是什么?
class组件中
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄该值会作为回调函数的第一个参数返回
class CustomForm extends Component {handleSubmit () {console.log(Input Value: , this.input.value)}render () {return (form onSubmit{this.handleSubmit}inputtypetextref{(input) this.input input} /button typesubmitSubmit/button/form)}
}
function组件中
函数式组件同样能够利用闭包暂存其值
function CustomForm ({handleSubmit}) {let inputElement useRef({})return (form onSubmit{() handleSubmit(inputElement.current.value)}inputtypetextref{inputElement} /button typesubmitSubmit/button/form)
}
3.react中三种构建组件的方式? 1React.createClass()很少使用 2ES6 classclass组件 3无状态函数多指的是函数组件 4.调用setstate之后发生了什么? 1状态合并 在代码中调用 setState 函数之后React 会将传入的参数对象与组件当前的状态合并然后触发所谓的调和过程Reconciliation。 2构建渲染react树 经过调和过程React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。 3diff节点差异 在 React 得到元素树之后React 会自动计算出新的树与老树的节点差异然后根据差异对界面进行最小化重渲染。 4按需更新 在差异计算算法中React 能够相对精确地知道哪些位置发生了改变以及应该如何改变这就保证了按需更新而不是全部重新渲染。 5.react diff原理 1把树形结构按照层级分解只比较同级元素 2列表添加唯一key 3只匹配相同class的component这里面的class指的是组件的名字 4合并调用setstate方法的时候react将其标记为dirty到每一个事件循环结束react检查标记dirty的component重新绘制。 5选择性子树渲染开发人员可以重写shouldComponentUpdate提高diff的性能(function组件useMemo加memo提高性能 6.为什么传递给setState的参数是一个callback而不是一个对象 因为 this.props 和 this.state 的更新可能是异步的不能依赖它们的值去计算下一个 state。 7.除了在构造函数中绑定this还有其他方式吗 你可以使用属性初始值设定项(property initializers)来正确绑定回调create-react-app 也是默认支持的。在回调中你可以使用箭头函数但问题是每次组件渲染时都会创建一个新的回调。 8.setState第二个参数的作用 因为setState是一个异步的过程所以说执行完setState之后不能立刻更改state里面的值。如果需要对state数据更改监听setState提供第二个参数就是用来监听state里面数据的更改当数据更改完成调用回调函数 9.(在构造函数中)调用super(props)的目的是什么 1在 super() 被调用之前子类是不能使用 this 的。 2子类必须在 constructor 中调用 super()。 3传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。 10.简述flux思想 最大特点就是数据的单向流动。 1用户访问connect封装的组件 View 2View 发出用户的 Action 3Dispatcher 收到 Action要求 Store 调用reducer对state进行相应的更新 4Store 更新后发出一个change事件 5View 收到change事件后根据更新的state刷新页面 11.在React中Element和Component的区别 1一个 React element 描述了你想在屏幕上看到什么。 换个说法就是一个 React element 是一些 UI 的对象表示。 2一个 React Component 是一个函数或一个类它可以接受输入并返回一个 React element t通常是通过 JSX 它被转化成一个 createElement 调用。 12.描述事件在React中的处理方式 1为了解决跨浏览器兼容性问题您的 React 中的事件处理程序将传递 SyntheticEvent 的实例它是 React 的浏览器本机事件的跨浏览器包装器。 2这些 SyntheticEvent 与您习惯的原生事件具有相同的接口除了它们在所有浏览器中都兼容。 3有趣的是React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的这也意味着在更新 DOM 时React 不需要担心跟踪事件监听器。 13.createElement和cloneElement有什么区别
createElement
1React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。
2它接受三个参数第一个参数可以是一个标签名。如 div、span或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数皆作为组件的子组件。
React.createElement(type,[props],[...children]
)
cloneElement
1React.cloneElement()与 React.createElement()相似。
2不同的是它传入的第一个参数是一个 React 元素而不是标签名或组件。
3新添加的属性会并入原有的属性传入到返回的新元素中而就的子元素奖杯替换。
React.cloneElement(element,[props],[...children]
)
14.如何告诉react它应该编译产生环境版本 1通常情况下我们会使用 Webpack 的 DefinePlugin 方法来将 NODE_ENV 变量值设置为 production。 2编译版本中 React 会忽略 propType 验证以及其他的告警信息同时还会降低代码库的大小React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息。 15.Controlled Component和Uncontrolled Component之间的区别是什么? 1受控组件Controlled Component 代指那些交由 React 控制并且所有的数据统一存放的组件。 2非受控组件Uncontrolled Component 则是由DOM存放表单数据并非存放在 React 组件中。我们可以使用 refs 来操控DOM元素 注意 不过实际开发中我们并不提倡使用非受控组件因为实际情况下我们需要更多的考虑表单验证、选择性的开启或者关闭按钮点击、强制输入格式等功能支持而此时我们将数据托管到 React 中有助于我们更好地以声明式的方式完成这些功能。引入 React 或者其他 MVVM 框架最初的原因就是为了将我们从繁重的直接操作 DOM 中解放出来。 二、React组件面试题
1.展示组件和容器组件有何不同 1.1展示组件 关心组件看起来是什么。展示专门通过 props 接受数据和回调并且几乎不会有自身的状态但当展示组件拥有自身的状态时通常也只关心 UI 状态而不是数据的状态。 1.2容器组件 1更关心组件是如何运作的。 2容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)它们会调用 Flux actions并将其作为回调提供给展示组件。 3容器组件经常是有状态的因为它们是(其它组件的)数据源。 2.类组件和函数组件有何不同 1类组件不仅允许你使用更多额外的功能如组件自身的状态和生命周期钩子也能使组件直接访问 store 并维持状态 2当组件仅是接收 props并将组件自身渲染到页面时该组件就是一个 无状态组件(stateless component)可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件 3.组件的状态state和属性props之间有何不同 1State 是一种数据结构用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变但多数时候是作为用户事件行为的结果。 2Props(properties 的简写) 则是组件的配置。props 由父组件传递给子组件并且就子组件而言props 是不可变的(immutable)。组件不能改变自身的 props但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。 4.何为受控组件 [state,setState]useState()比如输入框它的值通过 React 的这种方式来控制这样的元素就被称为受控元素。 5.何为高阶组件 1高阶组件是一个以组件为参数并返回一个新组件的函数。 2HOC 运行你重用代码、逻辑和引导抽象。 3最常见的可能是 Redux 的 connect 函数。 4除了简单分享工具库和简单的组合HOC 最好的方式是共享 React 组件之间的行为。 如果你发现你在不同的地方写了大量代码来做同一件事时就应该考虑将代码重构为可重用的 HOC。 6.应该在React组件的何处发起ajax请求 1在 React 组件中应该在 componentDidMount 中发起网络请求。 2这个方法会在组件第一次“挂载”(被添加到 DOM)时执行在组件的生命周期中仅会执行一次。 7.React中组件传值 1父传子组件嵌套浅父组件定义一个属性子组件通过this.props接收。 2子传父父组件定义一个属性并将一个回调函数赋值给定义的属性然后子组件进行调用传过来的函数并将参数传进去在父组件的回调函数中即可获得子组件传过来的值。 3父获取子组件的数据和方法父组件传递ref给Child组件forwardRef封装子组件使用useImperativeHandle钩子保留数据和方法给父组件使用 import React, { forwardRef, useImperativeHandle } from react;// 子组件
const ChildComponent forwardRef((props, ref) {// 使用 useImperativeHandle 自定义公开的方法useImperativeHandle(ref, () ({getValue: () props.value}));return input typetext {...props} /;
});// 父组件
const ParentComponent () {const childRef useRef(null);const handleClick () {if (childRef.current) {alert(childRef.current.getValue());}};return (ChildComponent ref{childRef} value我是Child组件的值 /button onClick{handleClick}获取Child值/button/);
}; 8.什么时候在功能组件上使用类组件 如果您的组件具有状态( state )或生命周期方法请使用 Class 组件。否则使用功能组件 9.受控组件和非受控组件有什么区别 受控组件 1数据驱动使用state状态渲染组件 非受控组件 1不受控制( uncontrolled component )的组件是您的表单数据由 DOM 处理而不是您的 React 组件。我们使用 refs 来完成这个。 10.React组件的划分业务组件技术组件 根据组件的职责通常把组件分为 UI 组件和容器组件。 1UI 组件负责 UI 的呈现 2容器组件负责管理数据和逻辑。 3两者通过 React-Redux 提供 connect 方法联系起来。 三、redux面试题
1.redux中间件 1中间件提供第三方插件的模式自定义拦截action-reducer的过程。 2变为action-middlewares-reducer。 3这种机制可以让我们改变数据流,实现异步action,action过滤,日志输出,异常报告等功能。 常见的中间件 redux-logger提供日志输出 redux-thunk处理异步操作 redux-promise处理异步操作actionCreator的返回值是Promise 2.redux有什么缺点 1一个组件所需要的数据必须由父组件传过来而不能像redux中直接从store取。 2当一个组件相关数据更新时即使父组件不需要用到这个组件父组件还是会重新render可能会有效率影响或者需要写复杂的shouldComponentUpdate进行判断。 3.说一下你理解的redux 概念 redux 是一个应用数据流框架主要是解决了组件间状态共享的问题原理是集中式管理。 主要有三个核心方法actionstorereducer。 redux的工作流程 工作流程是 view 调用 store 的 dispatch 接收 action 传入 storereducer 进行 state 操作view 通过 store 提供的 getState 获取最新的数据。 flux的工作流程 flux 也是用来进行数据操作的有四个组成部分 actiondispatchviewstore工作流程是 view 发出一个 action派发器接收 action让 store 进行数据更新更新完成以后 store 发出 changeview 接受 change 更新视图。 redux和flux的区别 1主要区别在于 Flux 有多个可以改变应用状态的 store在 Flux 中 dispatcher 被用来传递数据到注册的回调事件但是在 redux 中只能定义一个可更新状态的 storeredux 把 store 和 Dispatcher 合并,结构更加简单清晰。 2新增 state,对状态的管理更加明确通过 redux流程更加规范了减少手动编码量提高了编码效率同时缺点时当数据更新时有时候组件不需要但是也要重新绘制有些影响效率。一般情况下我们在构建多交互多数据流的复杂项目应用时才会使用它们 四、React性能比较面试题
1.vue和react的区别 1react严格上针对的是mvc模式的view层vue则是mvvm模式。 2操作dom的方式不同vue使用的是指令操作domreact是通过js进行操作。 3数据绑定不同vue实现的是双向绑定react的数据流动是单向的。 4react中state是不能直接改变的需要使用setState改变。vue中的state不是必须的数据主要是由data属性在vue对象中管理的。 2.react性能优化的方案 1重写shouldComponentUpdate来避免不必要的dom操作。 注意function组件使用useMemomemo结合优化性能它们可以避免组件或组件内部的计算在每次渲染时都执行从而减少不必要的性能开销。 2使用 production 版本的react.js。 3使用key来帮助React识别列表中所有子组件的最小变化。 3.react项目用过什么脚手架 MernMERN是脚手架的工具它可以很容易地使用Mongo, Express, React and NodeJS生成同构JS应用。它最大限度地减少安装时间并得到您使用的成熟技术来加速开发。 webpack单独开文章写笔记 vite单独开文章写笔记 gulp。。。 4.介绍一下webpack webpack是一个前端模块化打包工具主要由入口出口loaderplugins四部分组成。 前端打包工具还有一个gulp侧重前端开发的过程而webpack侧重于模块例如它会把css文件看作一个模块通过css-loader将css打包成符合css的静态资源。 5.如果你创建了类似于下面的Twitter元素那么它们相关的类定义是什么
Twitter usernametylermcginnis33{(user) user null? Loading /: Badge info{user} /}
/Twitter
这种模式中组件会接收某个函数作为其子组件然后在渲染函数中以 props.children 进行调用
import React, { Component, PropTypes } from react
import fetchUser from twitter
class Twitter extends Component {state {user: null,}static propTypes {username: PropTypes.string.isRequired,}componentDidMount () {fetchUser(this.props.username).then((user) this.setState({user}))}render () {return this.props.children(this.state.user)}
}
这种模式的优势在于将父组件与子组件解耦和父组件可以直接访问子组件的内部状态而不需要再通过 Props 传递这样父组件能够更为方便地控制子组件展示的 UI 界面。譬如产品经理让我们将原本展示的 Badge 替换为 Profile我们可以轻易地修改下回调函数即可
Twitter usernametylermcginnis33{(user) user null? Loading /: Profile info{user} /}
/Twitter
6.为什么我们需要使用react提供的children API而不是Javascript的map props.children并不一定是数组类型譬如下面这个元素 Parenth1Welcome./h1
/Parent如果我们使用props.children.map函数来遍历时会受到异常提示因为在这种情况下props.children是对象object而不是数组array。 React 当且仅当超过一个子元素的情况下会将props.children设置为数组就像下面这个代码片 Parenth1Welcome./h1h2props.children will now be an array/h2
/Parent这也就是我们优先选择使用React.Children.map函数的原因其已经将props.children不同类型的情况考虑在内了。 createElement 函数是 JSX 编译之后使用的创建 React Element 的函数而 cloneElement 则是用于复制某个元素并传入新的 Props。 四、React常见的几种钩子
1.useState
1、useState 是用来解决函数组件中不能定义自己的状态的问题useState 可以传递一个参数做为状态的初始值返回一个数组数组的第一个元素是返回的状态变量第二个是修改状态变量的函数。
他的定义格式第一个是变量名第二个是改变变量的方法
const [state, setState] useState(initalState); // 初始化state可以任意命名setState(newState); // 修改state的值2.useEffect
useEffect 在类组件中放在 componentDidMountcomponentDidUpdate 等执行的请求获取数据的操作在React Hooks中都可以用 useEffect 来处理他可以类比类组件中的两个生命周期函数。
useEffect(() {// 此处编写 组件挂载之后和组件重新渲染之后执行的代码...return () {// 此处编写 组件即将被卸载前执行的代码...}
}, [dep1, dep2 ...]); // 依赖数组 useEffect和useLayoutEffect的区别 1执行时机不同 useEffect在组件渲染到屏幕之后异步执行。这意味着它不会阻塞浏览器的绘制和更新适用于大多数与数据获取、订阅事件、手动修改DOM等不会直接影响页面布局和视觉呈现的操作。 useLayoutEffect会在浏览器进行布局和绘制之前同步执行。useLayoutEffect中执行的操作会修改DOM样式或结构并且在浏览器绘制之前就完成这些修改避免页面的重绘和回流带来的性能问题。 注意useLayoutEffect是在DOM结构更新后、渲染前执行在渲染时是同步执行相当于有一个防抖效果。 2对性能影响不同 useEffect由于是异步执行不会阻塞页面的渲染对用户交互的响应性影响较小但如果副作用操作耗时较长可能会在用户操作后有短暂的延迟才看到效果。 useLayoutEffect由于是同步执行如果在其中执行的操作耗时较长会阻塞页面的渲染可能导致页面卡顿影响用户体验。 3对渲染的影响不同 useEffect 的执行不会阻塞浏览器的渲染工作 useLayoutEffect 的执行可能会阻塞浏览器的渲染使用 useLayoutEffect 时需要注意性能问题。 4 使用场景不同 一般情况下如果副作用操作不会影响页面的布局建议使用useEffect。例如发送网络请求获取数据、添加事件监听器、更新本地存储等。 如果副作用操作会影响页面的布局和视觉呈现例如直接修改DOM元素的样式、位置、大小等为了避免页面的闪烁和重绘建议用useLayoutEffect。 useLayoutEffect会在浏览器进行布局和绘制之前同步执行。这意味着它可以在 DOM 更新后、浏览器绘制之前进行操作从而避免由于异步的useEffect可能导致的闪烁现象。 使用建议 将直接影响页面布局和视觉呈现的操作放在useLayoutEffect中例如直接修改 DOM 元素的样式、位置、大小等。因为它会等待这些操作完成后再进行渲染所以可以避免页面的闪烁。 减少useLayoutEffect中执行的复杂或耗时操作。由于它是同步执行如果操作过于耗时可能会阻塞页面的渲染导致卡顿。如果必须进行复杂计算或耗时操作可以考虑将其拆分为异步操作或者在操作完成后再进行必要的 DOM 更新。 精确管理依赖项只将会影响布局的变量添加到依赖项数组中。这样可以避免不必要的useLayoutEffect执行。 3.useLayoutEffect useLayoutEffect 使用方法、所传参数和 useEffect 完全相同。大多数情况下将 useEffect 替换成 useLayoutEffect 完全看不出区别。 唯一区别就是 使用 useEffect 时页面挂载会出现闪烁。而使用 useLayoutEffect 时页面没有闪烁是因为 useEffect 是在页面渲染完成后再去更新数据的所以会出现短暂的闪烁而 useLayoutEffect 是在页面还没有渲染时就将数据给更新了所以没有出现闪烁。 注意大部分情况用useEffect就足够了useLayoutEffect 会阻塞渲染所以需要小心的使用。 4.useMemo useMemo 是为了减少组件重新渲染时不必要的函数计算可以用来做性能优化。 类似于vue中的计算属性他的依赖值是后面数组中的值 const memoizedValue useMemo(() { // 计算逻辑 ... // return res; }, [a, b]); useMemo 可以传入2个参数第1个参数为函数用来进行一些计算第2个参数是依赖关系(可选参数)返回值为第一个函数 return 出去的值只有在依赖项发生变化时才会重新执行计算函数进行计算如果不传依赖项每次组件渲染都会重新进行计算。 // 代码示例
import { useState, useMemo } from reactfunction Demo() {const [num, setNum] useState(0);const addNum () {setNum(num 100);};const total useMemo(() {console.log(---求和---);// 求和计算let temp 0;for(let i num; i 0; i--) {temp i;}return temp;}, [num]);return (divbutton onClick{addNum}addNum/buttonp{num: ${num}}/pp{total: ${total}}/p/div)
}export default Demo; 点击修改num的值total 对应的计算函数会重新执行一遍因为num是该计算函数的依赖项。 5.useContext 在 React 中传递属性只能一层一层传如果组件结构比较复杂层级比较深的时候数据传递起来就比较麻烦可能会经过很多次的传递才能将属性传递到目标组件中那么有没有一种可以在全局进行状态共享的实现方法呢useContext 就是为了解决这个问题的可以实现不必层层传递就能共享状态的功能。具体用法看下面步骤 先封装一个js,里面可以设置初始值这个初始值可以在任何地方使用 import React from react;
// React.createContext()中的参数是默认值可填可不填
const UserContext React.createContext( { name: 张三 });
export default UserContext; 在代码中引用封装好的js文件 Father: import React, { useContext } from react
import UserContext from ./context;// const UserContext React.createContext();function Demo() {// 如果React.createContext没有指定默认值也可以在对应子组件上套上UserContext.Provider来指定值return (// UserContext.Provider value{{ name: 张三 }}Child /// /UserContext.Provider)
} Child: function Child() {const user useContext(UserContext);return (divp{name: ${user.name}}/p/div)
}export default Demo; 6.useReducer
useReducer 也是用来实现状态管理的 hookuseState 就是基于 useReducer 实现的useReducer 可以实现比 useState 更复杂的状态管理逻辑。
它可以对多个值进行管理他的定义方式和useState很像但是useState 是基于它实现的使用时注意定义的参数
// 代码示例
import React, { useReducer } from react// 1.需要有一个 reducer 函数第一个参数为之前的状态第二个参数为行为信息
function reducer(state, action) {switch (action) {case add:return state 1;case minus:return state - 1;default:return 0;}
}function Demo() {// 2.引入useReducer第一个参数时上面定义的reducer第二个参数时初始值// 3.返回为一个数组第一项为状态值第二项为一个 dispatch 函数用来修改状态值const [count, dispatch] useReducer(reducer, 0);return (divbutton onClick{() { dispatch(add) }} add/buttonbutton onClick{() { dispatch(minus) }} minus/buttonbutton onClick{() { dispatch(unknown) }} unknown/buttonp{count: ${count}}/p/div);
}export default Demo;
7.useRef useRef 可以帮助我们获取 dom 和 react 组件实例类组件中的 React.createRef() 也有相同的功能。 除了用 useRef 获取组件实例还可以用来存储变量的值但是需要注意的一点是修改 .current 的值不会触发组件的重新渲染。 8.useCallback 返回一个缓存的回调函数缓存一个函数类型因变量 useCallback和useMemo的区别 useCallback 的用法和 useMemo 完全一样useMemo 返回的是计算函数 return 出去的值而 useCallback 可以理解成返回的是那个计算函数。 9.React.memo
当父组件发生改变时默认情况下它的子孙组件也会重新渲染当某些子组件不需要更新时也会被强制更新为了避免这种情况我们可以使用 React.memo。 类组件中有 shouldComponentUpdate 和 PureComponent 来避免子组件做不必要的渲染。
函数组件中的 React.memo() 也有类似的功能它和 PureComponent 类似但是只适用于函数组件默认情况下仅对 props 进行一个浅比较来决定要不要更新复杂情况下支持自己手写对比的逻辑。
function Demo(props) {// ...
}function compare(prevProps, nextProps) {// 自己写对比逻辑返回 true 更新false 跳过更新// return false
}export default React.memo(Demo, compare)
参数1组件要渲染的内容。参数2写的回调函数一般情况下都在props传过来的数据为引用类型才需要手动来判断如果是基本类型则不需要写参数2来手动判断。
如果是引用类型可以用下面方法进行比较
const Child React.memo(({ count }) {return (divh3child组件 -- {count.n}/h3/div)},// 使用lodash库来完成对象的值的比较从而用来完成减少组件的无用的重复渲染(prevProps, nextProps) _.isEqual(prevProps, nextProps)
)
10.forwardRef forwardRef 可以在父组件中操作子组件的 ref 对象并且将 ref 对象作为一个参数传递给了子组件。 forwardRef可以结合useImperativeHandle钩子使用暴露值和方法给父组件使用。 加上forwardRef后子组件就多了个入参ref来绑定对应子组件的dom元素。 11.总结
可以将他们分为两个部分其中useRef 不属于两者
11.1自变量本身是可以改变从而影响其他
1) useState 定义自变量
2) useReducer 用于操作多个自变量一个层级的自变量和因变量也可以成为其他层级的自变量和因变量
3) useContext 可以跨层级的传递自变量
11.2 因变量因自变量改变而导致自己改变
1) useMemo 和 useCallback缓存函数类型因变量 定义无副作用的因变量 2) useEffect 定义有副作用可以进行一些操作比如修改某些参数请求数据操作dom等的因变量
3) useReducer 可看成是一个进阶版的useState ,借用redux的设计理念将多个state合并成一个本质上也是一个因变量。
4) useRef 可以操作子组件中的方法也可以作为一个保存数值的标记在路径中起到缓存数据的作用
更多可见文档地址
https://zh-hans.react.dev/reference/react/hooks
五、高级指引
1.无障碍
2.代码分割
3.Context
4.错误边界
5.Refs转发
6.Fragments
7.高阶组件
8.与第三方组件协同
9.深入jsx
10.性能优化
11.Portals
12.Profiler
13.不使用es6
14.不使用jsx
15.协调
16.RefsDOM
17.Render Props
18.静态类型检查
19.严格模式
20.使用propTypes类型检查
21.非受控组件
22.Web Components
更多可参考文档地址
https://zh-hans.react.dev/reference/react
