第三十七章扩展知识点2-阿里云开发者社区

第三十七章扩展知识点 1:https://developer.aliyun.com/article/1409375

6、Fragment 和空标签（<> 和 </>）

在 React 中，Fragment 和空标签（<> 和 </>）都用于组合多个子元素，而不需要添加额外的 DOM 元素。这在避免不必要的 DOM 层次结构和提高性能方面非常有用。

使用 Fragment

要使用 Fragment，您需要从 react 包中导入它，然后将它作为包裹元素。以下是一个示例：

import React, { Fragment } from 'react';
function MyComponent() {
  return (
    <Fragment>
      <div>Element 1</div>
      <div>Element 2</div>
    </Fragment>
  );
}

在这个示例中，Element 1 和 Element 2 将作为同级元素渲染，而不需要额外的包裹元素。

使用空标签

空标签（<> 和 </>）是 Fragment 的简写语法。它们的功能与 Fragment 相同，但更简洁。以下是一个使用空标签的示例：

import React from 'react';
function MyComponent() {
  return (
    <>
      <div>Element 1</div>
      <div>Element 2</div>
    </>
  );
}

在这个示例中，Element 1 和 Element 2 也将作为同级元素渲染，而不需要额外的包裹元素。

请注意，虽然空标签更简洁，但它们不支持添加 key 属性。如果您需要在迭代中使用 Fragment 并添加 key 属性，您应该使用完整的 <Fragment> 标签。

7、Context

在 React 中，Context 是一种在组件树中传递数据的方法，而无需通过每个中间组件显式传递 props。这在处理跨越多个层次的全局数据（如主题、语言设置或用户信息）时非常有用。

(1)、创建 Context

首先，您需要创建一个 Context。通常，您会在应用程序的顶层创建一个 Context。

import React from 'react';
const MyContext = React.createContext();
export default MyContext

(2)、使用Provider传递Context值

要在组件树中提供 Context 值，您需要使用 Provider 组件。Provider 接受一个 value 属性，该属性将作为 Context 的值传递给所有使用该 Context 的子组件。

import React, { Component } from 'react'
import B from './B'
import MyContext from './MyContext'
const {Provider} = MyContext
export default class Demo extends Component {
  render() {
    return (
      <div>
        <Provider value={{username:'tom',age:18}}>
          <B/>
        </Provider>
      </div>
    )
  }
}

(3)、在类式组件中使用static contextType接收Context值

在类组件中访问 Context 的方法是使用 static contextType。将 contextType 设置为您要访问的 Context，然后在组件中，您可以通过 this.context 访问 Context 的值。

import React, { Component } from 'react'
import MyContext from '../MyContext'
import C from '../C'
import D from '../D'
export default class B extends Component {
  static contextType = MyContext
  render() {
    console.log('我是B组件接收的context',this.context)
    return (
      <div>
        <h2>我是B组件{this.context.username+','+this.context.age}</h2>
        <C/>
        <D/>
      </div>
    )
  }
}

(4)、使用Customer在函数组件和类组件中接收Context值

在类组件和函数组件中，您可以使用 Context.Consumer 组件来访问 Context 值。Context.Consumer 接受一个函数作为子元素，该函数接收 Context 的值作为参数。

import MyContext from "../MyContext"
const {Consumer} = MyContext
export default function C () {
  return (
    <div>
      <Consumer>
        {value => {
          console.log('我是C组件接收的Context',value)
          return <h3>我是C组件{value.username+''+value.age}</h3>
        }}
      </Consumer>
    </div>
  )
}

(5)、使用useContext Hook在函数组件中接收Context值

要在组件中使用 Context 值，您可以使用 useContext Hook。useContext 接受一个 Context 对象，并返回该 Context 的当前值。

import { useContext } from 'react'
import MyContext from '../MyContext'
export default function D () {
  const contextValue = useContext(MyContext)
  console.log('我是D组件接收的context',contextValue)
  return (
    <div>
      <h3>我是D组件</h3>
      <div>{contextValue.username+','+contextValue.age}</div>
    </div>
  )
}

请注意，虽然 Context 可以简化跨多个层次的数据传递，但在不需要的情况下过度使用 Context 可能会导致组件之间的不必要的耦合。因此，建议仅在确实需要全局数据时使用 Context ,在应用开发中一般不用Context, 一般都用它的封装react插件

8、组件优化

Component的2个问题

只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低

只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

效率高的做法

只有当组件的state或props数据发生改变时才重新render()

原因

Component中的shouldComponentUpdate()总是返回true

解决

办法1: 
  重写shouldComponentUpdate()方法
  比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:  
  使用PureComponent
  PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
  注意: 
    只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
    不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化

如何理解pureComponent

我们首先需要了解React组件的基本概念。在React中，有两种类型的组件：函数组件和类组件。PureComponent是类组件的一种特殊类型，它可以帮助我们优化性能。

PureComponent是React提供的一个基类，它继承自React.Component。与普通的Component不同，PureComponent实现了一个浅比较（shallow comparison）的shouldComponentUpdate方法。这意味着，当组件的props或state发生变化时，PureComponent会对新旧props和state进行浅比较，如果它们相等，那么组件就不会重新渲染。这可以避免不必要的渲染，从而提高性能。

要使用PureComponent，只需将组件的基类从React.Component更改为React.PureComponent。例如：

import React from 'react';
class MyComponent extends React.PureComponent {
  // ...
}

需要注意的是，PureComponent的浅比较可能会导致一些问题。例如，当组件的props或state包含嵌套对象时，浅比较可能无法检测到嵌套对象的变化。因此，在使用PureComponent时，需要确保组件的props和state是不可变的（immutable）。

总之，PureComponent是一种特殊的React类组件，它通过实现浅比较的shouldComponentUpdate方法来避免不必要的渲染，从而提高性能。在使用PureComponent时，需要确保组件的props和state是不可变的

使用shouldComponentUpdate进行自定义优化

如果PureComponent或React.memo的浅比较不足以满足需求，可以在类组件中实现自定义的shouldComponentUpdate方法。这允许您根据特定条件决定组件是否应该重新渲染。例如：

  class MyComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
      // 自定义比较逻辑
      return nextProps.someProp !== this.props.someProp;
    }
    // ...
  }

React.memo是React库中的一个高阶组件（Higher-Order Component，简称HOC），它用于优化函数组件的性能。React.memo的作用类似于类组件中的PureComponent，它通过对组件的props进行浅比较（shallow comparison）来避免不必要的重新渲染。

当使用React.memo包装一个函数组件时，只有当组件的props发生变化时，组件才会重新渲染。这可以帮助我们减少不必要的渲染，从而提高性能。例如：

import React from 'react';
const MyComponent = React.memo(function MyComponent(props) {
  // ...
});

需要注意的是，React.memo的浅比较可能会导致一些问题。例如，当组件的props包含嵌套对象时，浅比较可能无法检测到嵌套对象的变化

9、render props

如何向组件内部动态传入带内容的结构(标签)?

Vue中: 
  使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
  使用children props: 通过组件标签体传入结构
  使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

<A>
  <B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到

标签体是一种React模式，它允许您将一个或多个React元素作为组件的子元素传递，并在组件中渲染这些元素。这些子元素可以是任何有效的React元素，包括其他组件。例如：

function MyComponent(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}
function App() {
  return (
    <MyComponent>
      <div>Child 1</div>
      <div>Child 2</div>
    </MyComponent>
  );
}

在这个例子中，MyComponent接受一个名为children的prop，该prop是一个React元素或一组React元素。在MyComponent中，我们使用props.children来渲染这些子元素。在App组件中，我们将两个<div>元素作为MyComponent的子元素传递。这些元素将被渲染为MyComponent的子元素。

render props

<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}

render props是另一种React模式，它允许您将一个函数作为prop传递给组件，并在组件中调用该函数以渲染子元素。这个函数通常称为render或children。例如：

function MyComponent(props) {
  const { render } = props;
  const data = { /* some data */ };
  return (
    <div>
      {render(data)}
    </div>
  );
}
function App() {
  return (
    <MyComponent
      render={(data) => (
        <div>
          {/* render something based on the data */}
        </div>
      )}
    />
  );
}

在这个例子中，MyComponent接受一个名为render的prop，该prop是一个函数。在MyComponent中，我们调用render函数并将数据作为参数传递。render函数返回一个React元素，该元素用于渲染MyComponent的子元素。

总之，标签体和render props是两种不同的React模式，它们的作用和用法也有所不同。标签体用于将React元素作为组件的子元素传递，而render props用于将函数作为prop传递，并在组件中调用该函数以渲染子元素。这两种模式都可以用于实现组件的可重用性和灵活性

10、错误边界

理解：

错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

特点：

只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误。

使用方式：`getDerivedStateFromError`配合`componentDidCatch`

// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}
componentDidCatch(error, info) {
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info);
}

对于React应用程序中的错误处理，可以使用错误边界来捕获和处理组件中的错误。错误边界是一种React组件，它可以捕获其子组件中的错误，并显示备用UI而不是崩溃的UI。以下是一个简单的错误边界组件的示例：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>服务器异常,请稍后在试.</h1>;
    }
    return this.props.children; 
  }
}

在这个例子中，ErrorBoundary是一个错误边界组件。它通过getDerivedStateFromError和componentDidCatch方法来捕获子组件中的错误，并在发生错误时显示备用UI。

getDerivedStateFromError方法返回一个对象，该对象将更新组件的状态以显示备用UI。componentDidCatch方法可以用于记录错误或将错误发送到错误报告服务。

要使用错误边界，只需将其包装在可能会发生错误的组件周围即可。例如：

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

在这个例子中，MyComponent是可能会发生错误的组件。通过将MyComponent包装在ErrorBoundary中，我们可以捕获并处理MyComponent中的错误。

案例：我们在render里面写一段错误代码，render属于生命周期

import React, { Component } from 'react'
export default class Demo extends Component {
  state = {users:'users'}
  render() {
    return (
      <div>
        我是Demo组件
        {
          this.state.users.map((user)=>{
            return <h1>{user.name}</h1>
          })
        }
      </div>
    )
  }
}

查看效果：

11、组件通信方式总结

组件间的关系：

父子组件
兄弟组件（非嵌套组件）

祖孙组件（跨级组件）

几种通信方式：

  1.props：
    (1).children props
    (2).render props
  2.消息订阅-发布：
    pubs-sub、event等等
  3.集中式管理：
    redux、dva等等
  4.conText:
    生产者-消费者模式

比较好的搭配方式：

  父子组件：props
  兄弟组件：消息订阅-发布、集中式管理
  祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)

第三十七章扩展知识点2

6、Fragment 和空标签（<> 和 </>）

7、Context

8、组件优化

Component的2个问题

效率高的做法

原因

解决

如何理解pureComponent

使用shouldComponentUpdate进行自定义优化

9、render props

如何向组件内部动态传入带内容的结构(标签)?

children props

render props

10、错误边界

理解：

特点：

使用方式：`getDerivedStateFromError`配合`componentDidCatch`

11、组件通信方式总结

组件间的关系：

几种通信方式：

比较好的搭配方式：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

第三十七章 扩展知识点2

6、Fragment 和空标签（<> 和 </>）

7、Context

8、组件优化

Component的2个问题

效率高的做法

原因

解决

如何理解pureComponent

使用shouldComponentUpdate进行自定义优化

9、render props

如何向组件内部动态传入带内容的结构(标签)?

children props

render props

10、 错误边界

理解：

特点：

使用方式：getDerivedStateFromError配合componentDidCatch

11、组件通信方式总结

组件间的关系：

几种通信方式：

比较好的搭配方式：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

第三十七章扩展知识点2

10、错误边界

使用方式：`getDerivedStateFromError`配合`componentDidCatch`