Build your own React_7 函数组件

Posted 2022-12-02 一只前端小马甲

前端工程师的要求越来越高，仅懂得“三大马车”和调用框架API，已经远不能满足岗位的能力要求。因此增强自身的底层能力，了解框架的内部原理非常重要。本系列文章，翻译自Rodrigo Pombo的《Build your own React》一文，同时每篇文章最后，都会加入自己的理解，一方面记录自己初探React框架原理的过程，另一方面也是想与各位大牛多多交流，以出真知。

我们打算从零开始重写一个React框架，在遵循源码架构的基础上，省略了一些优化和非核心功能代码。

假设你阅读过我之前的文章《build your own React》，那篇文章是基于React 16.8版本，当时还不能使用hooks来替代class。

你可以在Didact仓库找到那篇文章和对应的代码。这里还有个相同主题的视频，跟文章的内容有些区别的，但是可以参考观看。

从零开始重写React框架，我们需要遵循以下步骤：

• 步骤一：createElement函数
• 步骤二：render函数
• 步骤三：并发模式
• 步骤四：理解React纤维
• 步骤五：渲染和提交阶段
• 步骤六：调解器
• 步骤七：函数组件
• 步骤八：Hooks

步骤七：函数组件

接下来我们需要做的是支持函数组件。

首先我们把最初的示例修改一下。我们将它变成一个函数组件，它会返回h1元素。

const Didact = 
	createElement,
	render,


/** @jsx Didact.createElement */
function App(props)
	return <h1>Hi props.name</h1>

const element = <App name="foo" />
const container = document.getElementById("root")
Didact.render(element, container)

然后我们将函数组件的JSX转化为js，就会变成下面这样：

function App(props)
	return Didact.createElement(
		"h1",
		null,
		"Hi ",
		props.name
	)

const element = Didact.createElement(App, 
	name: "foo",
)

函数组件有两个不同的地方：

• 函数组件生成的fiber没有没有对应DOM节点
• children节点由函数直接返回，而不是通过props属性获取

//	requestIdleCallback(workLoop)
//
//requestIdleCallback(workLoop)

function performUnitOfWork(fiber)
	if(!fiber.dom)
		fiber.dom = createDom(fiber)
	

	const elements = fiber.props.children
	reconcileChildren(fiber, elements)

//	if(fiber.child)
//		return fiber.child
//	
//	let nextFiber = fiber
//	while(nextFiber)
//

我们判断纤维对应元素是源自函数，对于函数组件的纤维我们有不同的更新函数。

在updateHostComponent中我们保持跟原来一样。

function performUnitOfWork(fiber)
	const isFunctionComponent = 
		fiber.type instanceof Function
	if(isFunctionComponent)
		updateFunctionComponent(fiber)
	else
		updateHostComponent(fiber)
	

//	if(fiber.child)
//		return fiber.child
//	
//	let nextFiber = fiber
//	while(nextFiber)
//		if(nextFiber.sibling)
//			return nextFiber.sibling
//		
//	
//	nextFiber = nextFiber.parent


function updateFunctionComponent(fiber)
	// TODO


function updateHostComponent(fiber)
	if(!fiber.dom)
		fiber.dom = createDom(fiber)
	
	reconcileChildren(fiber, fiber.props.children)


//function reconcileChildren(wipFiber, elements)
//	let index = 0

在updateFunctionComponent中，我们运行函数，获得子节点。

在我们的例子中，fiber.type是App函数，当我们执行它会得到h1元素。

然后，一旦我们获得了子元素，调解工作就跟之前一样了，我们不需要再修改任何东西。

//function updateFunctionComponent(fiber)
	const children = [fiber.type(fiber.props)]
	reconcileChildren(fiber, children)
//

//function updateHostComponent(fiber)
//	if(!fiber.dom)
//		fiber.dom = createDom(fiber)
//	
//	reconcileChildren(fiber, fiber.props.children
//

我们还要修改的是commitWork函数。

function commitWork(fiber)
	if(!fiber)
		return
	

	const domParent = fiber.parent.dom
	if(
		fiber.effectTag === "PLACEMENT" && 
		fiber.dom != null
	)
		domParent.appendChild(fiber.dom)
	else if(
		fiber.effectTag === "UPDATE" && 
		fiber.dom != null
	)
		updateDom(
			fiber.dom,
			fiber.alternate.props,
			fiber.props
		)
	else if(fiber.effectTag === "DELETION")
		domParent.removeChild(fiber.dom)
	

	commitWork(fiber.child)
	commitWork(fiber.sibling)


//function render(element, container)

对于没有DOM节点的纤维，我们需要修改两个地方。

首先，为了确定函数组件的父DOM节点，我们需要在fiber数中向上找，直到找到一个有DOM节点的纤维。

//if(!fiber)
//	return
//

let domParentFiber = fiber.parent
while(!domParentFiber.dom)
	domParentFiber = domParentFiber.parent

const domParent = domParentFiber.dom

//if(
//	fiber.effectTag === "PLACEMENT" && 
//	fiber.dom != null
//)
	domParent.appendChild(fiber.dom)
//else if(
//	fiber.effectTag === "UPDATE" && 
//	fiber.dom != null
)

其次，当需要移除一个节点是，我们需要向下找直到找到一个具有DOM节点的子元素。

//		)
//	else if(fiber.effectTag === "DELETION")
		commitDeletion(fiber, domParent)
//	

//	commitWork(fiber.child)
//	commitWork(fiber.sibling)
//

function commitDeletion(fiber, domParent)
	if(fiber.dom)
		domParent.removeChild(fiber.dom)
	else
		commitDeletion(fiber.child, domParent)
	


//function render(element, container)
//	wipRoot = 

总结

步骤六中，作者对之前只向DOM中添加节点做了补充，将新老节点的dom属性、props属性进行对比，然后对其更新和删除。

步骤七则介绍了函数组件的更新和删除的方法，函数组件没有对应的DOM属性，且子节点只能通过函数返回，因此我们需要对performUnitOfWork函数以及对应的commitWork函数做些修改。

上一篇传送门：Build your own React_6 调解器
下一篇传送门：Build your own React_8 Hooks