我今天刚看react,也不知道理解的对不对，然后画了一个图。。我觉得就是 ReactDOM.render先去在页面id为root的地方用.render方法渲染，那么渲染什么呢，就是这个Counter组件。这个组件里更新页面的方式就是组件里的reder()方法，在调用Cunter组件的时候 , 可以加上name = “xxx” 当然也可以 写上 aaa=111 bbb=222 然后在组件内部用this.props.name/aaa/bbb访问到你传的值 ，直接访问this.prop 因该是一个{name:1,aaa:111,bbb:222}这样的东西，就理解成vue的父传子吧。。
import React from 'react'; import ReactDOM from 'react-dom'; class Counter extends React.Component { state = { count: 0 }; // 加 1 onAdd() { this.setState({ count: this.state.count + 1 }); } // 减 1 onSub() { this.setState(prevState => { return { count: prevState.count - 1 }; }); } render() { return ( <div> {/* 这里的 this.props 属性 */} <h1>{this.props.name}</h1> <button onClick={this.onSub.bind(this)}>-</button> <span>{this.state.count}</span> <button onClick={this.onAdd.bind(this)}>+</button> </div> ); } } // Counter 组件传了一个 name 属性 ReactDOM.render( <Counter name="计数器" />, document.getElementById('root') );