使用方法

html 中的 div 容器叫根节点
根节点内的所有内容都是由 ReactDOM 进行管理

一个 React 应用只有一个根节点，用 ReactDOM.render() 方法将 react 元素渲染到根节点中

  1. const rEL = <h1 className="title">This is a title</h1>;
  3. /**
  4.  *    @param ReactElement - react元素
  5.  *    @param rootNode - 根节点
  6.  */
  7. ReactDOM.render(
  8.     rEl,
  9.   document.getElementById('app');
  10. )

基本的更新逻辑

  1. React 元素是不可变对象 imutable Object

    1. 不能添加属性
    2. 不能修改属性
    3. 不能删除属性
    4. 不能修改属性的枚举、配置、可写
      enumerable / configurable / writable

  2. ReactDOM.render 会深度对比新旧元素的状态，只会做必要的真实 DOM 更新 ```jsx function update(){ const rEl = (

    This is a title

    { new Date().toString() }

    );

    ReactDOM.render( rEl, document.getElementById(‘app’); ); }

setInterval(update, 1000); // 观察 element 中节点的更新状况 // h1 没有更新 // 只有 h2 在更新

  2.    - 渲染之前 -> 每个 React 元素组成一个虚拟 DOM 的对象结构 -> 渲染
  3.    - 更新之前 -> 形成新的虚拟 DOM 的对象结构  -> 对比新旧的虚拟DOM节点 -><br />                    分析出两者的不同点 -> 形成一个 DOM 更新的补丁 -> 操作真实 DOM (更新真实 DOM )
  5. 以分析对比形成补丁来剔除一些不必要的 DOM 操作
  7. - DOM 元素内容更新
  8. - DOM 元素位置变更
  10. 来优化性能
  12. ```jsx
  13. // 类组件
  14. class Title extend React.Component {
  15.     render (){
  16.       return <h1>This is a title.</h1>
  17.   }
  18. }
  20. // 函数组件
  21. function Title(){
  22.     return ( <h1>This is a title.</h1> );
  23. }
  25. // <Title /> 相当于实例返然后 运行render()
  26. // 也可以 React.createElement()把类转变React元素
  27. ReactDOM.render(
  28.     // <Title />,
  29.   // React.createElement(Title),
  30.   document.getElementById('app');
  31. )

如果是组件渲染
ReactDOM.render 的第一个参数一定要是 React 元素

  1. 组件使用 JSX 语法
  2. 使用 React.createElement 将组件转换为 React 元素

这样才能 使组件内部的 render 函数 或 函数组件 执行