元素渲染

React Dom

如果我们在一个 HTML 页面中添加一个 id=“example” 的

<div id="example"></div>

在此 div 中的所有内容都将由 React DOM 来管理，我们将其称为 “根” DOM 节点。接下来我们的渲染都会通过 Dom 放在这里面。

要将 React 元素渲染到根 DOM 节点 (也就是 “example”) 中，我们需要用 ReactDOM.render() 的方法来将其渲染到页面上：

将元素渲染到 DOM 中

下面是一个渲染例子：

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

更新渲染

React 元素都是不可变的。当元素被创建之后，我们是无法改变其内容或属性的。

目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render () 方法：

来看一下这个计时器的例子:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

这个例子中，我们每一秒中重新渲染一次元素，相当于用新的去覆盖旧的。

封装元素的渲染

将需要展示的部分封装起来，要使用时直接调用：

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}
 
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

这样我们就相当于创建了一个基础组件，

除了用这种函数式的封装，还有一种类式的封装：

const Example = React.createClass({
  render() {
    return (
      <div>666</div>
    );
  }
});
export default Example;

类式的封装有些不同：

它必须拥有自己的 render 方法，用于输出组件
类式的封装第一个字母必须大写

React18 中，如果不遵循这个书写规范，实际上并不会发生什么

但是在一些旧版本中，会出现报错

所以还是按着规范来，而且良好的书写规范在实际合作开发中是有利于代码阅读理解的

3.类式的封装只能包含一个顶层标签，这与 vue 的 template 相似，即最外层只能有一个标签。

4.类式的封装的属性可以在 this.props 上获取

5.class 需要写作 className，lable 标签中 for 需要写作 htmlFor，因为 class 和 for 是 JS 的保留字。

如果学习过 ES6，我们也可以基于 ES6 也可以通过 extends React.Component 来创建组件：

import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}
export default Example;

通常这些 ES6 代码需要使用类似 Babel 的工具转换为 ES5 代码之后才能在浏览器中正常执行。这里我们引入了一个叫 constructor 的东西，因为我们需要在这里调用 super() 函数来为 React.Component 传递属性。

react之元素渲染 | 青训营笔记

元素渲染

React Dom

将元素渲染到 DOM 中

更新渲染

封装元素的渲染