持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第31天，点击查看活动详情

前言

前面简单学习了一下React的重要的函数式的Hook函数，接下来学习一下非常小又非常有意思的知识点。感觉最近在水文章，简单用代码演示过后印象很模糊，全部知识了解，项目中用不到的肯定会忘记，后面想用React启动一个taro来做一个可以过审的微信小程序。目前暂时还没有想好做什么内容。

Fragment

在React的中使用函数式组件或者类式组件会返回一个只有一个根节点的html文档，但是不支持有多个根节点的html文档，Fragment就解决了这一个痛点。可以以Fragment这个组件为一个根节点，来返回一个类似列表的多个根节点的html文档，React渲染的时候会把自身的这个Fragment这个标签去掉。

我们还是来做一个简单的例子看一下：

先看一个错误例子，测试一下在脚手架根目录下的App.js返回一个列表html文档:

import React from 'react';


function App() {

	return (
		<div>
			test1
		</div>
			<div>
			test2
		</div>
	);
}
export default App;

直接在报错信息里告诉我是不是想写fragment组件：

微信截图_20220617002303.png 那现在改一下这个代码试试：

import React, { Fragment } from 'react';

function App() {

	return (
		<Fragment>
		<div>
			test1
		</div>
			<div>
			test2
		</div>
		</Fragment>
	);
}
export default App;

这就正常了：

Context

Context是React中一种组件间的通信方式，常用语祖组件与后代组件之间的通信，也就是组件间通信就可以跨过很多组件了，在一般情况下数据是通过props属性自上而下(由父组件向子组件)传递的。

话不多说直接在脚手架App.js中测试一下怎么创建容器对象，让子组件读取这个父组件中的值：

import React, { createContext } from 'react';

const { Provider, Consumer } = createContext()

function ComA() {
	return (
		<div>
			this is A组件
			<ComC />
		</div>
	)
}

function ComC() {
	return (
		<div>
			this is C组件
			<div>
				<Consumer>
					{value => <span>{value}</span>}
				</Consumer></div>
		</div>
	)
}

function App() {
	let state = {
		meesage: 'this is message'
	}
	return (
		<Provider value={state.meesage}>
			<div>
				<ComA />
			</div>
		</ Provider>
	)
}
export default App;

文字解释一下这个代码的含义：
一共定义了三个函数是组件名称分别为：App，ComA，ComC。

在App.js文件中使用import React, { createContext } from 'react';引入了createContext这个方法，然后使用解构赋值引入了一个提供者组件一个消费者组件，分别为：Provider，Consumer 。

在App这个爷爷组件中使用了提供这个Provider存了一个value的值。在孙子组件ComC使用了Consumer拿到了这个值并渲染了出来，注意中间跨过了一个ComB组件。App->ComA->ComC

看看效果：

总结

今天学习了两个React小知识点，Freagment和Context，Freagment比较简单，浅显易懂，后面的Context也不复杂，有点小小的繁琐，在网上找寻资料的时候对于Context的解释都比较啰嗦。我直接通过最简单的示例展示出来了，还是需要自己敲代码才能真正理解，接下来再学习两个小知识点就结束React基础知识的了解学习，嘿嘿。

React 学习笔记（31）Fragment组件 & Context

前言

Fragment

Context

总结