温故知新 ReactJS

站长

2023年07月19日 18:13 · 阅读数 15

对组件化的理解

组件将应用的 UI 拆分成独立的、可复用的模块。

组件化的核心，就是两点:

封装

共同的逻辑
复用

通过属性（props）的传递，展示不同的模板内容

定义组件的两种方式

class component

条件：
1. class 继承自 React.Component(PureComponent)
2. class 内部必须定义 render 方法。
3. 如果自定义了 constructor 函数，必须调用 super(props) 方法。调用super实际上是调用了 React.Component 这个 class 的 construcor 方法，用来完成 React 组件的初始化工作。
function component

组件的生命周期

单组件生命周期

温故知新 ReactJS

componentDidMount

在 componentDidMount 生命钩子中，组件已经挂在，真实 DOM 也已经渲染完成，是调用服务器 API 最安全的地方。

componentWillMount 也可以获取服务器 API，因为越早拿到数据，越能更快的返回组件并展示正确的组件。但是当组件在服务器端渲染时，componentWillMount 会被调用两次，一次是在服务器端，一次是在浏览器端。而 componentDidMount 能保证在任何情况下只会被调用一次。

componentWillReceiveProps

props 的更新，会触发子组件的 componentWillReceiveProps 生命周期方法。

如果需要用 props 中的某个属性和服务端交互，componentWillReceiveProps 就很合适。

父子组件生命周期执行顺序

父子组件生命周期执行顺序和 Vue 的一样。

父子组件加载时：

// console.log
父组件 constructor

父组件 render

子组件 constructor

子组件 render

子组件 componentDidMount

父组件 componentDidMount

父组件更新时

父组件 render

子组件 render

子组件 componentDidUpdate

父组件 componentDidUpdate

卸载子组件

父组件 render

子组件 componentWillUnmount

父组件 componentDidUpdate

React 中 JSX 本质是什么？

本质还是 JS。

JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。

React 中 JSX 只是一种表现形式，可以让你以一种更方便的方式动态的创建组件。JSX 最终会被转化成 JS 代码。

JSX 语法对 React 来说只是 React.createElement 的语法糖。所有的 JSX 语法最终都会被转换成 React.createElement 函数的调用。

// JSX
const element = <div className="foo">Hello, React</div>

// 转换后
const element = React.createElement(
  'div',
  {
    className: 'foo'
  },
  'Hello, React'
)

这也就是为什么我们代码中有时候并未使用 React，但是必须导入的原因。

为什么多个 JSX 标签需要被一个父元素包裹？

JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。

这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。

为什么操作 DOM 比操作 JS 要慢，且更耗性能？

主要是在两个方面：

跨模块通信。DOM 的实现和 JS 的实现属于两个独立的模块，跨模块交互性能消耗挺高。
耗浏览器性能。当我们操作 DOM，通常会引起浏览器的重绘和回流。

JSX 和 vDom 的关系？

JSX 需要转为成 html，必须先转化为 js，通过 vdom 来描述 html 关系，最终渲染为 html.

React.createElement 和 h 函数，都生成 vNode.

ReactDOM.render 和 setState 时，都需要 patch。

key 的作用

React 中 key 属性是用来标记列表中的每个元素，当列表数据发生变化时，React 在做 diff 时就可以通过 key 知道哪些元素发生了变化，从而只重新渲染发生变化了的元素，提高渲染效率。

state 和 props 的区别是什么

state 和 props 都和组件的 UI 渲染有关，它们的变化都会触发组件的重新渲染，但是 props 对于使用它的组件来说是只读的，是通过父组件传递过来，要想修改 props，只能通过父组件修改。而 state 是组件内部自己维护的状态，可变的。

setState 合适的时候合并更新

setState 组件大部分情况下是异步的，调用后不会立即更新组件的 state，而是将 state 的更新加入到更新队列中，然后在合适的时候批量处理这些更新。

当你传入对象并调用了多次 setState，这几个对象会被合并，执行结果拿最后那个 setState。

count = 0

this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })

类似于将三个 count 放到同一个对象上：

{
  count: this.state.count + 1,
  count: this.state.count + 1,
  count: this.state.count + 1,
}

所以只剩下一个 count 了，只会累加一次，count = 1。

如果给 setState 传入一个函数，React 不会将多个更新合并为一个处理。

this.setState(pre => {
  return {
    count: pre.count + 1
  }
})

this.setState(pre => {
  return {
    count: pre.count + 1
  }
})

最终 count 是 2.

setState是同步的还是异步的？

setState 大部分情况下是 异步 的

调用 setState 时，组件的 state 并不会立即改变，setState 只是把要修改的状态放入到一个队列中，React 会优化真正的执行动机。

并且出于性能考虑，可能会将多次 setState 的状态修改合并成一次状态修改。
在 setTimeout 中是同步的
自己定义的 DOM 事件中，setState 是同步的

// count 初始值为1，每点击一次，增加 1。

<button onClick={() => {
  console.log('count ', this.state.count) // 1
  this.setState({ count: this.state.count + 1}, () => {
    console.log(this.state.count) // 2
  })
  console.log('cout ', this.state.count) // 1
}}>add</button>

在 setTimeout 中是同步的

setTimeout(() => {
  this.setState({
    count: this.state.count + 1
  })

  console.log(this.state.count) // 累加了：1
}, 0);

自己定义的 DOM 事件中，setState 是同步的

componentDidMount(): void {
  document.body.addEventListener('click', this.bodyClicked.bind(this))
}

bodyClicked() {
  console.log(this.state.count) // 0

  this.setState({
    count: this.state.count+1
  })

  console.log(this.state.count) // 1
}

看道面试题：初始值 count = 0，查看打印结果。

componentDidMount(): void {
  this.setState({
    count: this.state.count + 1
  })

  console.log(this.state.count) // 0

  this.setState({
    count: this.state.count + 1
  })

  console.log(this.state.count) // 0


  setTimeout(() => {
    this.setState({
      count: this.state.count + 1
    })

    // setState 传入了对象，合并处理后只有一个 count + 1
    console.log(this.state.count) // 2
  }, 0);

  setTimeout(() => {
    this.setState({
      count: this.state.count + 1
    })

    console.log(this.state.count) // 3
  }, 0);
}

问题：为何需要异步？

setState 可以多次设置，如果设置成同步，每一次 setState 都触发更新渲染，会比较 消耗性能。设置成异步，可以将需要更新的数据集中起来，一次性渲染。

而且，js 是单线程的，执行 js 过程和 DOM 渲染是互斥的，也就是说 js 执行时，DOM 的渲染是被阻塞的，DOM渲染时拿到的结果就是 js 执行完毕的结果。

假设 setState 是同步的，我们想要将 count 累加到 10，设置了 10 次 setState，因为 DOM 渲染被阻塞了，只能等待 js 执行完毕才会渲染 DOM，所以用户是看不到 count 从 1 累加到 10 的这个过程，最终 js 执行完毕，DOM 会直接渲染出 10。

Vue 渲染 DOM 也是异步的，可以通过 this.$nextTick 可以获取最新的数据

state 与不可变值

React采用函数式编程的不可变数据特性。

而在React中不可变值的意思就是：始终保持state的原值不变。

不要直接修改state，遇到数组或者对象，采用copy一份出去做改变。

在做性能优化时很重要。

this.setState({
  obj1: Object.assign({}, this.state.obj1, {a: 100}),
  obj2: {...this.state.obj2, a: 100},
  arr: this.state.arr.slice(),
})

不可变值的目的

性能优化

在生命周期 shouldComponentUpdate 根据返回值决定是否需要重新渲染。因为父组件只要 state 或 props 更新了就会重新渲染，从而子组件也会更着渲染。

React会对新旧state和props进行比较，如果直接修改state去用于其他变量的计算，而实际上state并不需要修改，则会导致怪异的更新以及没必要的更新，因此采用这种方式是非常巧妙，且效率非常的高。

可追踪修改痕迹，便于排错

使用this.setState的方式进行修改state的值，相当于开了一个改变值的口子，所有的修改都会走这样的口子，相比于直接修改，这样的控制力更强，能够有效地记录与追踪每个state的改变，对排查bug十分有帮助。

React 事件

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。<button onClick={activateLasers}>
不能通过返回 false 的方式阻止默认行为。你必须显式地使用 preventDefault
所有事件挂在到 document 上

React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装并交由真正的处理函数运行。

温故知新 ReactJS

event 对象（合成事件）

React event 对象是 SyntheticBaseEvent，属于合成事件，模拟 DOM 事件的所有能力

可以通过 event.nativeEvent 获取到原生事件

e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。

e.preventDefault() 阻止少数事件的默认浏览器行为，如表单提交。

为何需要合成事件机制？

更好的兼容性和跨平台
挂在到 document，减少内存消耗，避免频繁的事件解绑
方便事件的统一管理

组件通信

props
ref（父组件获取到子组件实例）

// 渲染子组件

<Child ref={child => {
  console.log('拿到 child 实例 ', child)

  console.log('调用 child 上的方法 ', child?.renderChild())
}} />

callback function（父组件传递方法给子组件）
利用事件冒泡机制

class Parent extends React.Component {
  render() {
    return (
      <div onClick={this.handleClick}>
         <Child />
      </div>
    );
  }
  handleClick = () => {
    console.log('clicked')
  }
}
function Child {
  return (
    <button>Click</button>
  );    
}

兄弟组件通信（将数据提升到父组件中）
context（深层次组件通信，避免 props 层层传递）

// common.ts
import React from "react";
export const ThemeContext = React.createContext('light')


// App.tsx
class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// ThemedButton
import { ThemeContext } from './common.ts'

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

如果是函数组件，则无法使用 static contextType = ThemeContext; 这种形式，我们可以通过 ThemeContext.Consumer 将函数组件包裹起来。

<ThemeContext.Consumer>
  <Child />
</ThemeContext.Consumer>

Redux

Portals（传送门）

可以将子组件渲染到父组件以外的地方去。比如常见的全局的 Modal 弹窗、全局的Message提示。

import ReactDOM from "react-dom";

render(): React.ReactNode {
  return ReactDOM.createPortal(
    <>Child Component</>,
    document.body
  )
}

异步组件

import()
React.lazy
React.Suspense

import React from 'react'

const AsyncDemo = React.lazy(() => import('./AsyncDemo.tsx'))

...
render() {
  return <>
    <React.Suspense fallback={<div>Loading...</div>}>
      <AsyncDemo />
    </React.Suspense>
  </>
}
...

将大组件进行异步加载，提高用户体验。并且异步加载的组件，会被重新打一个 js 包出来。

在 Vue 中引入组件时，直接使用 import 函数导入即可实现异步加载组件。

性能优化 - SCU（shouldComponentUpdate）

默认返回 true

shouldComponentUpdate(nextProps, nextState) {
  // 重新渲染
  if (nextState.count !== this.state.count) return true

  return false // 不重新渲染
}

为什么不可变值对 SCU 这么重要？？？

来看个错误的例子，下面这个例子会渲染 ul > li (1, 2, 3)，我们在 onPushList 中，通过 push 方法直接修改了 state.list。

然后在 shouldComponentUpdate 中，判断当前组件是否需要重新渲染。

你会发现，组件没有更新！！！

import React from "react";

interface IState {
  list: Array<number>
}

export default class Child extends React.Component<{}, IState> {
  constructor(props: {}) {
    super(props)

    this.state = {
      list: [1, 2, 3]
    }
  }

  shouldComponentUpdate(nextProps: Readonly<{}>, nextState: Readonly<IState>, nextContext: any): boolean {
    if (nextState.list === this.state.list) {
      return false
    }

    return true
  }

  onPushList() {
    // 直接修改 list
    this.state.list.push(4)

    this.setState({
      list: this.state.list
    })
  }

  render(): React.ReactNode {
    return <>
      <button onClick={this.onPushList.bind(this)}>push list</button>

      <ul>
        {
          this.state.list.map(i => <li key={i}>{i}</li>)
        }
      </ul>
    </>
  }
}

为什么呢？？

这就是因为没有遵循数据的不可变原则的原因。

我们通过 push 方法直接对 list 增加了一个数值 4，此时 this.state.list = [1, 2, 3, 4]，但是 SCU 中判断逻辑也是用的 this.state.list，它和 nextState.list 是相同的，指向地址一样，数值一样，那么 SCU 返回了 false，组件不会重新渲染！

正确写法：

onPushList() {
  this.setState({
    list: this.state.list.concat(4)
  })
}

性能优化 - pureComponent

继承自 pureComponent 的组件，相当于在 SCU 中实现了 浅比较。

性能优化 - React.memo

优化函数组件。

React.memo 包裹一个函数组件，来对它的 props 进行浅比较。等效于 PureComponent，但它只比较 props。（也可以通过第二个参数指定一个自定义的比较函数来比较新旧 props。如果函数返回 true，就会跳过更新。）

公共逻辑复用 HOC & render props

组件公共逻辑的抽离

mixin

import { Component } from 'react'

// mixin
const customMixin = {
  componentDidMount() {
    console.log(' --- mixin componentDidMount --- ')
  },
  sayName() {
    console.log(this.state.name)
  }
}



function componentClassMixins(Component, mixin){ /* 继承 */
  for(let key in mixin){
    Component.prototype[key] = mixin[key]
  }
}

调用 componentClassMixins 方法，第一个参数是我们的组件，第二个参数传我们编写的 mixin

HOC

高阶组件是参数为组件，返回值为新组件的函数。

当多个组件都需要某个相同的功能，使用高阶组件可以减少重复实现。

比如有很多组件都想要获取 当前鼠标位置 的功能。

import React from "react";

interface IState {
  mouse: {
    x: number
    y: number
  }
}

const withMouse = function(Comp: React.FC<IState>) {

  class MouseComponent extends React.Component<{}, IState> {

    constructor(props: {}) {
      super(props)

      this.state = {
        mouse: {
          x: 0,
          y: 0
        }
      }
    }

    onMouseMove(event: React.MouseEvent) {
      this.setState({
        mouse: {
          x: event.clientX,
          y: event.clientY,
        }
      })
    }

    render() {
      return <div onMouseMove={this.onMouseMove.bind(this)}>
        <Comp {...this.props} mouse={this.state.mouse}/>
      </div>
    }
  }

  return MouseComponent
}

export default withMouse

Vue 如何实现高阶组件

Vue 进阶必学之高阶组件 HOC

render props

术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术

组件接收一个 值为函数 的 prop，动态 prop。
render props 函数返回一个组件

其实 render props 和 HOC 很相像，可以随意转换。

以 HOC 中 withMouse 为例，将其改为 render props

// Mouse
class Mouse extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      x: 0,
      y: 0
    }
  }

  onMouseMove(event: React.MouseEvent) {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    })
  }

  render() {
    return <div onMouseMove={this.onMouseMove.bind(this)}>
      {/*
        使用 `render`prop 动态决定要渲染的内容
      */}
      {this.props.render(this.state)}
    </div>
  }
}

App 使用 Mouse 组件，App 组件内部就可以通过 props 实时获取到 mouse 的位置了。

const withMouseApp = () => {
  return (
    <Mouse render={ state => <App mouse={state} /> } />
  )
}

export default withMouseApp

render prop 一个有趣的事情是你可以使用带有 render prop 的常规组件来实现大多数高阶组件 (HOC)。例如，如果你更喜欢使用 withMouse HOC而不是组件，你可以使用带有 render prop 的常规轻松创建一个。

Diff 算法

每次组件的状态或属性更新，组件的 render 方法都会返回一个新的虚拟DOM，用来描述新的 UI 结构。

正常情况下，比较两个树形结构差异的算法的时间复杂度是O(N^3)，这个效率显然是无法接受的。

React 提出了两个假设，优化了树形结构差异的算法时间复杂度，O(N)：

如果两个元素的类型不用，那么它们将生成两棵不同的树。
为列表中的元素设置 key 属性，标识对应的元素在多次 render 过程中是否发生变化。

React 比较两棵树是从树的根节点开始比较的，比较规则如下：

当根节点是不同类型时，React 会认为新的树和旧的树完全不同，不再比较，直接替换掉旧的树
当根节点是相同的 DOM 元素类型时，React 会保留根节点，而比较根节点的属性，然后只更新那些变化了的属性。

虚拟 DOM 的节点类型分两种：
1. DOM元素类型：比如 div、p..
2. React 组件类型：比如自定义的 React 组件。
当根节点是相同的组件类型时，对应的组件实例不会被销毁，只会执行更新操作，同步变化的属性到虚拟 DOM 树上。

比较完根节点后，React 会已同样的原则继续递归比较子节点，每一个子节点相对于其层级以下的节点来说又是一个根节点。

key

当一个节点有多个子节点时，默认情况下，React 只会按照顺序逐一比较两个树上对应的节点。

比较下面两棵树，两棵树前面的两个 li 都相同，最终只会插入一个新的节点。

<ul>
  <li>first</li>
  <li>second</li>
</ul>

// 仅仅只是插入了一个元素

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

如果 <li>third</li> 是被插入到子节点的第一个位置，那么按照顺序比较的话，差异就大了，导致每一个节点都被修改。

引入 key 来标识节点，React 会根据 key 来匹配子节点，只要子节点的 key 值没有变化，React 就会认为这是同一个节点。

<ul>
  <li key="first">first</li>
  <li key="second">second</li>
</ul>

<ul>
  <li key="third">third</li>
  <li key="first">first</li>
  <li key="second">second</li>
</ul>

有了 key 做标识，React 就在 diff 时就会知道 first 和 second 这两个元素没有发生变化，所以只会在这两个元素前面插入 third 元素。

所以 key 的使用减少了 DOM 操作，提高了 DOM 的更新效率。

React 和 Vue 的区别

相同点：

都支持组件化
数据驱动视图
都使用 vDom 操作 DOM

区别：

React 使用 JSX，Vue 使用 template
React 函数式编程，Vue 声明式编程

ReactHooks缺点 —— 状态不同步问题

function App(props: any) {
  const [count, setCount] = useState(0)

  let timer: any = null

  const onClick = () => {
    setCount(count + 1)
  }
  const onClickAsync = () => {
    timer = setTimeout(() => {
      console.log('count ', count)
    }, 3000);
  }

  useEffect(() => {
    return () => {
      clearTimeout(timer)
    }
  }, [])

  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={onClick}>立即执行</button>
      <button onClick={onClickAsync}>异步执行</button>
    </div>
  )
}

问题：

count = 0，点击异步执行后，再点击立即执行表示 count + 1，3秒后，打印结果为 0。

原因：

函数的变量保存在运行时的作用域里，在点击 异步执行 按钮的时候，执行函数的内部作用域将变量 count 复制了一份，无论 count 在这 3 秒内如何变化，定时器的回调函数读取的 count 还是原来的值。

React Fiber

React Fiber 是 React 中的一种新的协调引擎（reconciliation engine），它是从 React 16 版本开始引入的重大改进。

React Fiber 的目标是提升 React 应用的性能、实现更好的并发控制，以及支持新的特性和能力。

传统的 React 渲染过程是基于递归的，当组件层级很深或组件树很大时，可能会出现长时间的渲染阻塞，导致用户界面的卡顿和不流畅。React Fiber 的目标是将渲染过程切割成一系列可中断的任务单元，可以通过优先级调度和时间片分配来控制任务的执行顺序，从而实现更细粒度的控制和更好的用户体验。

React Fiber 的架构使得在渲染过程中可以中断、暂停和恢复渲染任务，这为实现异步渲染、增量更新和并发渲染提供了基础。它还支持 优先级调度，使得 React 能够根据任务的紧急程度动态地分配时间片，保证优先处理重要的任务，提高响应能力。

基于 requestAnimationFrame 实现任务调度和时间切片

React Fiber 依赖了 requestAnimationFrame 这个 API，它是在浏览器环境中提供的用于执行动画的定时器函数。requestAnimationFrame 方法会在浏览器下一次重绘之前调用指定的回调函数，用于实现平滑的动画效果。

React Fiber 使用 requestAnimationFrame 来进行任务调度和时间切片。它利用 requestAnimationFrame 在浏览器空闲时间执行任务，以避免阻塞主线程，并提供更流畅的用户界面响应。

通过使用 requestAnimationFrame，React Fiber 可以将任务拆分为更小的单元，并在每个时间片段内执行一部分任务，以便将渲染过程分散到多个帧中，提高应用的性能和响应能力。

需要注意的是，requestAnimationFrame 是浏览器提供的 API，只能在浏览器环境中使用，无法在 Node.js 等非浏览器环境下运行。

requestAnimationFrame 原理是什么？

requestAnimationFrame 是浏览器提供的一个 API，用于在 下一次重绘（repaint）之前 执行回调函数，通常用于执行动画或其他需要与浏览器绘制同步的操作。

requestAnimationFrame 的工作原理如下：

当调用 requestAnimationFrame(callback) 时，浏览器会在下一次重绘之前调用 callback 函数。重绘通常与显示器的刷新频率（一般是 60Hz）相匹配，即每秒触发约 60 次。
浏览器会在每个重绘的时机执行回调函数，这样可以确保回调函数在最佳的时机执行，避免了执行频率过高或过低的问题。
callback 函数中执行的操作通常包括更新动画帧、计算布局或执行其他需要与页面绘制同步的任务。
如果在 callback 函数中再次调用 requestAnimationFrame，浏览器会安排下一次回调在下一次重绘之前执行，形成一个循环，从而实现动画的持续更新。

通过使用 requestAnimationFrame，可以有效利用浏览器的绘制时机，避免了过早或过晚执行动画帧的问题，提供了更平滑和高效的动画效果。同时，由于浏览器会自动调整重绘频率，节省了资源和电能的消耗。

React 如何做权限控制？

Vue 中可以通过指令来做 v-auth

比如某个用户登录了之后，根据当前用户的角色来控制页面的显隐，以及对按钮的显隐控制？

在 React 中进行权限控制可以采用以下几种方式：

条件渲染（Conditional Rendering）：根据用户的角色或权限，通过条件判断来决定是否渲染某个组件或元素。例如，可以在组件的 render 方法中根据用户角色来判断是否显示某个特定的组件或元素。

render() {
  const { user } = this.props;
  return (
    <div>
      {user.isAdmin && <AdminPanel />}
      {user.isLoggedIn && <UserProfile />}
      {user.hasPermission('edit') && <EditButton />}
    </div>
  );
}

2. 高阶组件（Higher-Order Components）：通过创建高阶组件来封装权限控制的逻辑。高阶组件接受一个组件作为参数，并返回一个新的组件，新组件根据用户的角色或权限来决定渲染或包装传入的组件。

const withAuthorization = (WrappedComponent, allowedRoles) => {
  return class extends React.Component {
    render() {
      const { user } = this.props;
      if (!user || !allowedRoles.includes(user.role)) {
        return null; // 不满足权限要求，返回空
      }
      return <WrappedComponent {...this.props} />;
    }
  };
};

const AdminPanel = () => {
  // 管理员面板组件
  // ...
};

const AuthorizedAdminPanel = withAuthorization(AdminPanel, ['admin']);

3. 权限控制组件（Authorization Component）：创建一个专门用于权限控制的组件，该组件在渲染过程中进行权限检查，并根据结果来决定如何渲染子组件。该组件可以通过 React 的上下文（context）来传递用户信息和权限信息。

const Authorization = ({ allowedRoles, user, children }) => {
  if (!user || !allowedRoles.includes(user.role)) {
    return null; // 不满足权限要求，返回空
  }
  return <React.Fragment>{children}</React.Fragment>;
};

const App = () => {
  // 用户信息和权限信息
  const user = {
    role: 'admin',
    // ...
  };

  return (
    <div>
      <h1>Welcome to the App</h1>
      <Authorization allowedRoles={['admin']} user={user}>
        <AdminPanel />
      </Authorization>
      <Authorization allowedRoles={['user']} user={user}>
        <UserProfile />
      </Authorization>
      <Authorization allowedRoles={['admin', 'editor']} user={user}>
        <EditButton />
      </Authorization>
    </div>
  );
};

这些方法都可以根据用户的角色或权限来进行页面的显隐控制和按钮的显隐控制。具体使用哪种方法取决于你的项目需求和组件结构，选择最适合的方式进行权限控制。

参考文献

React 旧文档

React 新文档

一起交流

不管你遇到什么问题，或者是想交个朋友一起探讨技术（=。=），都可以加入我们的组织，和我们一起 ~

喜欢这部分内容，就加入我们的QQ群，和大家一起交流技术吧~

QQ群：1032965518

温故知新 ReactJS

对组件化的理解

定义组件的两种方式

组件的生命周期

componentDidMount

componentWillReceiveProps

父子组件生命周期执行顺序

React 中 JSX 本质是什么？

为什么多个 JSX 标签需要被一个父元素包裹？

为什么操作 DOM 比操作 JS 要慢，且更耗性能？

JSX 和 vDom 的关系？

key 的作用

state 和 props 的区别是什么

setState 合适的时候合并更新

setState是同步的还是异步的？

state 与 不可变值

React 事件

event 对象（合成事件）

组件通信

Portals（传送门）

异步组件

性能优化 - SCU（shouldComponentUpdate）

性能优化 - pureComponent

性能优化 - React.memo

公共逻辑复用 HOC & render props

mixin

HOC

render props

Diff 算法

key

React 和 Vue 的区别

ReactHooks缺点 —— 状态不同步问题

React Fiber

基于 requestAnimationFrame 实现任务调度和时间切片

requestAnimationFrame 原理是什么？

React 如何做权限控制？

参考文献

一起交流

state 与不可变值