关键词

声明式 、 组件化

初识组件

创建组件

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

使用组件

<ShoppingList name="Mark" />

一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写），然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。

render 方法的返回值描述了你希望在屏幕上看到的内容。

相当于使用 React.createElement()

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

React.createElement函数

参数列表：

1. 元素类型（div,h1,img...）
2. 如果是对象则为属性，如果是字符串则为节点中的内容
3. 同2

ReactDOM.render函数

参数列表：

1. 需要渲染的节点