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