react实现原理猜测

最新推荐文章于 2025-06-17 09:50:09 发布

big_big-world

最新推荐文章于 2025-06-17 09:50:09 发布

阅读量266

点赞数

CC 4.0 BY-SA版权

分类专栏： React相关前端

本文链接：https://blog.youkuaiyun.com/qq_33150267/article/details/80073222

前端同时被 2 个专栏收录

58 篇文章

订阅专栏

React相关

13 篇文章

订阅专栏

本文深入探讨了React框架解决的主要问题，包括组件复用、数据与视图同步，并通过实例剖析了React的工作原理。此外，还提供了一个简化版React的实现代码，帮助读者更好地理解其内部机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react 解决的问题：

1前端组件的复用性问题:

      class Component{
constructor(){}
setState(){}
}

2数据和视图的同步问题

class Sample extends Component{

constructor(){

super()

this.state={}

}

virtual-DOM

jsx javascript 扩展

javascript对象描述

{

tag:"div",

attrs:[],

chaildrens:{

tag:"div",

attrs:[],

}

3.react实现原理猜测

我们动手写一个有状态组件

class Button extends Component{

constructor(props){

super(props)

this.state={clolor:red}

}

onClick(){

this.setState={

color:this.state.color

}

render(){

return(

)

}

1.猜测return 方法的jsx的转译成对象，所以不能直接用 class for等js的关键字

2.setState在Component 类里实现了render()功能，

3.Component 在constructor 实现了 construcor(props={}){
this.props=props
}

4.setState的DOM更新使用了virtual-DOM

4 自己实现一个React

class Component{
	constructor(props={}){
	this.props=props
	}
	setState(state){
	this.state=state
	const oldEl=this.el
	let newEl=this.renderDOM()
	if(this.onStateChange){this.onStateChange(oldEl,newEl)}
	}
	renderDOM(){
	this.el=createDOMFromString(this.render())
	this.el.addEventListener("click",this.onClick.bind(this),false)
	return this.el
	}
	}
	const mount=(component,wrapper)=>{
	wrapper.appendChild(component.renderDOM())
	component.onStateChange=(oldEl,newEl)=>{
	wrapper.insertBefore(newEl,oldEl)
	wrapper.removeChild(oldEl)
	}
	}