了解即可使用react的旧方法:创建React元素（React.createElement方法)、组件的生命周期不常用的

使用react的旧方法

- 按顺序引入react和react-dom的两个js文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

- 创建React元素（React.createElement方法，了解即可，不简便)

- 渲染到页面

ReactDOM.render()方法：把创建好的react元素（或组件参数）渲染到页面中

ReactDOM.render(title, root)
ReactDOM.render(el, document.getElementById('root'))

<body>
  <div id="root"></div> 
  
  <!-- 1. 引入js文件 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

  <script>
    // 2. React.createElement方法创建react元素
    // 参数一：元素名称（html标签名字）
    // 参数二：元素属性(传递的是个对象，没有就写null)
    // 第三个及其以后的参数：元素的子节点(子节点可以是文本节点，也可以是元素节点)
    const title = React.createElement('h1', null, 'Hello React')

    // 3 渲染react元素
    // 参数一：要渲染的react元素
    // 参数二：DOM对象，用于指定把元素渲染到页面中的位置（挂载点）
    ReactDOM.render(title, document.getElementById('root')) //拿到页面中id为root的DOM对象作为挂载点
  </script>
</body>

检查元素

<body>
    <div id="root">
        <h1>Hello React</h1>  <!-- h1自身没有属性（设置的时候写的null），内容为文本 -->
    </div>
    ...
</body>

不常用的钩子函数

新版完整生命周期钩子函数

新版生命周期函数.png

`getDerivedStateFromProps()`

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
不管原因是什么，都会在每次渲染前触发此方法

`shouldComponentUpdate()`

根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染
当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true

`getSnapshotBeforeUpdate()`

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等