从 0 到 1 实现 React 系列 —— 组件和 state|props (2)

让我们用下面这个用例跑下写好的 react 吧！

class A extends Component { constructor(props) { super(props) this.state = { count: 1 } } click() { this.setState({ count: ++this.state.count }) } render() { return ( <div> <button onClick={this.click.bind(this)}>Click Me!</button> <div>{this.props.name}:{this.state.count}</div> </div> ) } } ReactDOM.render( <A />, document.getElementById('root') )

效果图如下：

至此，我们实现了 props 和 state 部分的逻辑。

小结

组件即函数；当 JSX 中是自定义组件时，经过 babel 转化后的 React.createElement(fn, ..) 后中的第一个参数变为了函数，除此之外其它逻辑与 JSX 中为 html 元素的时候相同；

此外我们将 state/props/setState 等 api 封装进了父类 React.Component 中，从而在子类中能调用这些属性和方法。

在下篇，我们会继续实现生命周期机制，如有疏漏，欢迎斧正。