React 入门（三）

虚拟 DOM

const element = <h1>Hello, world!</h1>;

React 中均是采用 JSX 来描述元素，这种元素与通常浏览器中的元素不同，事实上是它普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。
这便是虚拟 DOM，React非常快速是因为它从不直接操作 DOM。虚拟 DOM 是在 DOM 的基础上建立了一个抽象层，程序中对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟 DOM，最后再批量同步到 DOM 中。
虚拟 DOM 具有批处理和高效的Diff算法，可以无需担心性能问题而随时“刷新整个页面”，因为虚拟 DOM 可以确保只对界面上真正变化的部分进行实际的 DOM 操作。

渲染元素

<div id="root"></div>

首先，需要在页面中定义一个根元素，通过ReactDOM.render()方法将 React 元素渲染到根节点上。

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'))

npm start 运行后，页面上会展示出 “Hello World” 。

渲染组件

元素与组件的区别

前文中const element = <h1>Hello, world</h1>都是单个元素。元素只是构成组件的一个部分，元素数据结构是普通对象，而组件数据结构是类或纯函数。

定义组件

可以采用JavaScript函数的形式来定义一个组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

这种函数支持传入一个 props 属性参数，并返回一个 React 元素。
也可以采用ES6定义类的方式定义一个组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

渲染

同样在页面中定义一个根基点root

<div id="root"></div>

使用ReactDOM.render()方法渲染组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

上面代码的执行过程为
1. 调用ReactDOM.render()方法渲染<Welcome name="Sara" />元素。
2. React将{name: 'Sara'}作为props传入并调用 Welcome 组件。
3. Welcome组件将<h1>Hello, Sara</h1>元素作为结果返回。
4. React DOM将DOM更新为<h1>Hello, Sara</h1>。

组件嵌套

在组件中可以引用其他组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

App中引用了Welcome组件，因而我们可以在应用中从下而上地定义和提取组件，从而达到组件可重用，简化复杂组件的效果。

注意点

无论是使用函数或是ES6类来声明一个组件，都不能直接修改它自己的props