首先,我写一个很简单的组件,用React-dom渲染 ,源码如下 ,打一个断点
import React, {
Component} from 'react';
import ReactDom from "react-dom"
debugger
class App extends Component {
state = {
c: 0
}
click(){
this.setState({
c: 100
})
}
render() {
return (
<div>
{
this.state.c} <br/>
<button onClick={
this.click.bind(this)}>click me </button>
</div>
)
}
}
ReactDom.render(<App name='app'/>, document.getElementById("root"))
webpack 打包后,我把代码优化了一下,通过这样看React的基本原理,我在node_modules 下的React包中的umd目录,拿到react和react-dom因为这样可以在浏览器端跑的,方便看源码 ,我把代码删减了许多不重要的代码之后,React的原理就呼之欲出了。。。
let _react = React
let _reactDom = reactDom
_react["default"] = React;
let createElement = _react.createElement;
function App(_Component) {
function App_() {
let _this = this;
// 一些控制、校验代码省略...
_this.state = {
c: 0};
return _this;
}
// App 继承 React.Component
_inherits(App_, _Component);
// 绑定在原型上的方法,和传统写类一样
const protoProps = [{
key: "click",
value: function click() {
this.setState({
c: 100
});
}
}, {
key: "render",
value: function render() {
return createElement("div", null, this.state.c, " ",
createElement("br", null),
createElement("button", {
onClick: this.click.bind(this)
}, "click me ")
);
}
}];
// 把 protoProps 绑定到 App_.prototype 上
// 得到结果 App_.prototype.click = function()...
// 得到结果 App_.prototype.render = function render()...
_createClass(App_, protoProps);
return App_;
}
// 这是一个高阶函数,返回一个继承自Component的函数,为什么这么写,因为还有PureComponent之类,还可以这么写 app = App(_react.PureComponent);
app = App(_react.Component);
//debugger
_reactDom.render(
// createElement react 创建vdom的核心方法,第一个参数可以是自定义的组件,也可以是 div p 这种
// createElement 三个参数 type props children
// app就是处理之后的App_方法
createElement(app, {
name: 'app'}),
document.getElementById("root")
);