React概念之render

在React中，·render·是核心概念，涉及到如何将组件的UI渲染到浏览器的DOM中。React使用一个种声明式的方式来描述用户界面，并通过虚拟DOM来高效更新DOM

1. ReactDOM.render
   在React中，通常使用ReactDOM.render来实际渲染到DOM的节点，一般在应用的入口文件（index.js或main.js）中调用。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

2. 组件渲染
   每个react组件都有一个render方法或者JSX的函数定义了UI的结构

a. 函数组件
定义了组件的一种间接方式，直接返回要渲染的JSX。

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

export default Welcome;

b. 类组件
类组件需要继承自 React.Component，并实现一个 render 方法。

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

export default Welcome;

3. 条件渲染
   React 允许在组件内部根据条件动态渲染不同的内容。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

4. 列表渲染
   可以使用 JavaScript 的数组方法（如 map）来渲染列表, 或者构建一个html数组。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return <ul>{listItems}</ul>;
}

5. 使用Fragment类似于vue的template
   React 提供了 Fragment 组件，用于在不额外创建 DOM 元素的情况下返回多个元素。

import React from 'react';

function App() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Description</p>
    </React.Fragment>
    /* 也可以用短语发
    <>
      <h1>Title</h1>
      <p>Description</p>
    <>
    */
  );
}

export default App;

6. JSX语法糖
   JSX 是一种语法糖，它在编译阶段会被转换成 React.createElement 调用。下面是一个简单的 JSX 例子及其转换结果：
   JSX

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

转换后的 JavaScript

const element = React.createElement('h1', null, 'Hello, world!');

7. 更新渲染
   React 通过比较当前的虚拟 DOM 和先前的虚拟 DOM 来高效地更新实际的 DOM。这种方式被称为协调（reconciliation）。