react中context传值和生命周期详解

我们来详细讲解一下“React中Context传值和生命周期详解”的完整攻略。

1. 什么是Context

Context允许我们不必通过逐层传递props，就可以在组件树中共享数据，并在其中任何地方访问该数据。Context 的主要应用场景是在跨多个层级的组件传递数据。

2. 创建Context

// 创建一个名为 MyContext 的context
const MyContext = React.createContext();

• createContext函数返回一个Context对象，它包含两个组件：Provider和Consumer。

• Provider是一个组件，它的目标是使用value属性把值传递给下游组件。

• Consumer是一个组件，目的是消费上游组件传递的值。

3. 通过Context传值

下面是一个简单的例子，展示如何使用Context在组件之间传值：

import React, { Component } from 'react';

const MyContext = React.createContext();

// 定义一个提供值的组件
class MyProvider extends Component {
  state = {
    message: 'Hello World'
  }

  render() {
    return (
      <MyContext.Provider value={this.state.message}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

// 定义一个消费值的组件
class MyConsumer extends Component {
  render() {
    return (
      <MyContext.Consumer>
        {value => <h1>{value}</h1>}
      </MyContext.Consumer>
    );
  }
}

// 在App组件中使用
class App extends Component {
  render() {
    return (
      <div>
        <MyProvider>
          <MyConsumer />
        </MyProvider>
      </div>
    );
  }
}

export default App;

在上述例子中，MyProvider组件提供了一个状态值message，MyConsumer组件消费了该值，并把它渲染到了页面上。注意，在MyProvider组件中使用Provider组件，通过value属性将状态值传递给MyConsumer组件。

4. 生命钩子函数componentDidUpdate和shouldComponentUpdate

当组件的Context的值发生改变时，React会调用Consumer组件的生命周期函数componentDidUpdate。例如，在下面的例子中，点击按钮后，将调用componentDidUpdate函数，更新值。

import React, { Component } from 'react';

const MyContext = React.createContext();

// 定义一个提供值的组件
class MyProvider extends Component {
  state = {
    message: 'Hello World'
  }

  componentDidMount() {
    setInterval(() => {
      if (this.state.message === 'Hello World') {
        this.setState({ message: 'Hello, React' });
      } else {
        this.setState({ message: 'Hello World' });
      }
    }, 1000);
  }

  render() {
    return (
      <MyContext.Provider value={this.state.message}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

// 定义一个消费值的组件
class MyConsumer extends Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.message !== this.props.message) {
      console.log('value has changed');
    }
  }

  render() {
    return (
      <MyContext.Consumer>
        {value => <h1>{value}</h1>}
      </MyContext.Consumer>
    );
  }
}

// 在App组件中使用
class App extends Component {
  render() {
    return (
      <div>
        <MyProvider>
          <MyConsumer />
        </MyProvider>
      </div>
    );
  }
}

export default App;

除了componentDidUpdate生命周期函数，shouldComponentUpdate生命周期函数在使用Context时也是非常有用的。

在下面的例子中，Counter组件使用MyContext.Context实现了一个计数器。当按下“+”按钮时，increment()函数会增加计数器值，并调用shouldComponentUpdate函数。如果shouldComponentUpdate返回false，则组件不会重新渲染，否则会渲染。这里，我们检查组件是否需要重新渲染，因为使用Context可能导致渲染更多的组件。

import React, { Component } from 'react';

const MyContext = React.createContext();

class Counter extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.count === this.props.count) {
      return false;
    }
    return true;
  }

  render() {
    return (
      <MyContext.Consumer>
        {({count, increment}) => (
          <div>
            <p>Count: {count}</p>
            <button onClick={increment}>+</button>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}

class MyProvider extends Component {
  state = {
    count: 0,
    increment: () => {
      this.setState(state => ({ count: state.count + 1 }));
    }
  }

  render() {
    return (
      <MyContext.Provider value={this.state}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <MyProvider>
          <Counter />
        </MyProvider>
      </div>
    );
  }
}

export default App;

在这个例子中，Counter组件检查是否需要重新渲染，如果需要，它会将count和increment作为属性传递给MyContext.Consumer，以便其他组件可以访问它们。注意，在MyProvider组件中使用Provider组件，通过value属性将count和increment传递给Counter组件。

5. 总结

这里我们讲解了使用Context实现组件之间传值和如何在Context变化时使用生命钩子函数来更新组件的值。Context是React中一个非常重要的特性。如果被使用得当，Context可以使数据在组件树中流动更加简单和方便。