React Context API

  • Z时代
  • 2024-01-10
  • 分类：综合

react

Context API提出的背景

在React.Context API提出以前，使用React进行项目开发时，组件间的通信主要是依赖于props属性将父级组件的props逐级传递到子组件，如下图1所示。当项目比较复杂，组件嵌套过多时，逐级进行通信不仅效率低（顶级组件的state修改可能会引发多个state的变更，从而需要调用多次setState），而且难以管理和溯源，底层组件所调用的props需要一级级反向查找才能明确来源。这对项目的开发和管理带来一定的不便利性。

Context的出现在一定程度上缓解了该问题，其原理如下图所示。Context就像一个公共接口一样，不同层级的组件都可以从Context中获取需要的props。Context使用了生产者-消费者模式，具体使用方法如下：

// vehicleContext.js -- 创建Context实例 
import React from 'react'
const VehicleContext = React.createContext({});
export const VehicleProvider = VehicleContext.Provider;
export const VehicleConsumer = VehicleContext.Consumer;

// index.js --  组件关系： Vehicle -> Car -> Audi
import React from 'react'
import { render } from 'react-dom'
import { Vehicle } from './vehicle.js';
function App () {
	return <Vehicle/>
}
render(<App/>, document.getElementById('root'))

// vehicle.js
import React from 'react';
import { VehicleProvider, VehicleConsumer } from './vehicleContext.js';
export class Vehicle extends React.Component {
	constructor (props) {
		super(props);
		this.state = {
			action: 'transport'
		}
	}
	render () {
		return (
		<VehicleProvider value={this.state.action}>
			<Car/>
		</VehicleProvider>
		)
	}
}
const Car = () => {
	return <Audi/>
}
const Audi = () => {
	return <VehicleConsumer>{context => <div>{context}</div>}</VehicleConsumer>
}

具体代码可以移步这里

参考文献：

  1. https://mp.weixin.qq.com/s/ii6H6mhe2OAUf7RquVxN8g

  2. http://react.html.cn/docs/context.html

以上是 React Context API 的全部内容， 来源链接： utcz.com/z/383214.html

回到顶部