哪有多奇怪

Hook Hook 是 React 16.8 的新增特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 在 React 中组件分为函数组件和类组件。但是函数组件能做的事有限，没有生命周期，没有状态，意味着函数组件只能做展示。 虽然类组件可以做很多事，但是类组件也有一些缺点： this 指向问题 繁琐的生命周期 其他问题 Hooks 本质上就是一个个函数（命名上总是以 use 开头，表示在函数组件中使用 xxx），专门用于增强函数组件的功能（类组件不能使用），使之理论上可以成为类组件的替代品。 它们都在 react 库中，可以像这样导入： 1import React, { useState } from "react"; State Hook 该 Hook 就是让函数组件具有 state。 State Hook 所对应的函数是 useState，语义也很明确，就是在函数组件中使用 state。 有一个参数，这个参数的值表示状态的默认值 返回值是一个数组： 0. 当前状态的值 改变该状态 ...

一些概念 **React 元素：**React Element，通过 React.createElement 创建，平常我们写的 jsx是语法糖，最终还是会被 Babel 编译成 React.createElement。 例如： 123456789101112function App() { return ( <div> <h1>hello world</h1> </div> );}ReactDOM.render( <App />, document.getElementById('root')); 经过 Babel 编译之后的代码为： 123456789101112function App() { return React.createElement( "div", null, React.createElement("h1", null, "hello wor ...

Context 上下文： 表示做某一些事情的环境。类似于语言环境中的上下文，上下文这个东西不是一个具体的东西，在不同的地方表示不同的含义，理解为环境比较好。 知乎上一个关于上下文的问题：编程中什么是「Context(上下文)」？ React 中的 Context： 组件可以创建一个上下文，上下文中的数据可以被所有的后代组件共享，而不需要层层传递 例如这样的一个组件结构： 12345678910111213141516171819202122232425function App() { return ( <> <Cmp1 /> <Cmp2 /> </> );}function Cmp1() { return ( <> <p>Cmp1</p> <Cmp3 /> </> );}function Cmp2() { return <p>Cmp2</ ...

生命周期 生命周期： 组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。 React 在组件的生命周期中提供了一系列的钩子函数，可以让我们在其中注入代码，在适当的时候运行。 注意： 生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件即刻被销毁。 旧版生命周期 旧版生命周期指的是 React 版本 < 16 所使用的生命周期： 可以将整个生命周期分为四个阶段，初始化阶段，挂载阶段，更新阶段，卸载阶段。（也可以将初始化阶段和挂载阶段合并） 初始化阶段：主要是初始化类组件的实例 挂载阶段：主要是将组件挂载到页面 更新阶段：主要是当属性/状态发送变化时重新渲染的过程 卸载阶段：主要是当我们不需要某个组件卸载的阶段 constructor 同一个组件只会运行一次，因为一个组件只需要创建一个对象 在运行构造函数的时候组件还未挂载，为了避免问题，不要在构造函数中使用 setState 使用会报错： componentWillMount 正常情况下，只会运行一次 服务端渲染情况下会被调用两次 可以正常使用 setState，但是为了避免多次 ...

什么是 ref ref 就是 reference（引用），当我们希望直接使用 DOM 元素中的某个方法（例如许多 H5 的 API）或者希望直接使用自定义组件中的某个方法。 先来看看 ref 大致怎么使用，可以很明了的看出 ref 就是组件的一个属性： 12345678910111213class App extends React.Component { componentDidMount() { console.log(this); } render() { return ( <div> <h1 ref="text">hello world</h1> </div> ); }} ref 的使用组件要求： ref 作用于内置的 html 组件，得到的将是真实的 DOM 对象 ref 作用于类组件，得到的将是类的实例 ref 不能作用于函数组件 ref 的用法 就像上面的例子，可以 ...