react实现原理猜测

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(

<button className="button"><button>

)

}

}

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)
	}
	}

完整代码见

https://github.com/bestGao/oursReact