React 采用了一种全新的 JSX 格式，对原来 JS 的语法做了进一步的扩展，使你可以在里面使用 HTML 标签从而将它变成一个组件，它的组件化的设计理念与 Vue 有很多相似之处。

Basis

先说一下基础概念。

**组件化(Component)**：和 Vue 基本相同，页面中所见皆是组件，不同的组件构成了一个页面。
**状态(State)**：状态是组件的数据，组件的显示内容可以根据状态的变化而变化。相当于 Vue 中的响应式变量。
**属性(Props)**：传递给组件的数据，相当于参数。

不使用框架直接在 HTML 中使用可以引入两个 script 标签：

1 2	<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

State

状态，也就是 Vue 中的响应式数据。

直接修改状态的数据并不会导致页面更新，因为这个状态占用的内存地址没有发生改变，所以如果想要让页面更新，需要更新这个状态，用到 setState 方法：

class App extends React.Component {
  constructor() {
    super(); /* 调用父类的构造函数 */
    this.state = {
      1: 1,
      2: 2,
    }
  }
  componentDidMount() {
    this.setState([arg1], [arg2])
  }
}

可以有两个参数：

第一个参数：可以是对象或者函数，如果是对象则直接修改对应的键值，这里相当于将两个对象进行了合并，如果是函数则执行相应的操作。
第二个参数：回调函数，由于 setState 是一个异步操作，所以第二个参数就是在执行完成第一个参数后再执行的操作。

在 React 的 HTML 标签中使用变量需要用到插值表达式，用花括号包裹即可，属性值是变量时不需要双引号包裹。

Component

先把根组件挂载到根元素上，这里在 index.html 中有一个 id 为 root 的元素，我们要把根组件挂载到这上面并渲染：

1 2	const root = ReactDOM.createRoot(document.getElementById('root')) root.render(<App />)

createRoot 返回一个根对象，有一个 render 方法，可以将 React 组件渲染到页面。

Class

类组件。

class App extends React.Component {
  constructor() {
    super(); /* 调用父类的构造函数 */
    this.state = {
      1: 1,
      2: 2,
    }
  }
  render() {
    return [component]
  }
}

需要有一个 render 方法来渲染组件，这个方法返回一个组件，组件只能由一个根元素包裹。有多行内容时，需要用小括号进行包裹。

但我们有时候并不想额外嵌套一个 div 标签，于是可以使用 <Fragment> 标签包裹，它不会被渲染，可以简写为 <></>。

组件挂载时会先执行 render 方法，因此不要有任何多余的操作。

只有状态值(state)或属性值(props)发生变化后才会触发重新渲染。

Function

函数组件。

1
2
3

const App = () => {
  return ()
}

需要渲染什么直接 return 即可。

变量函数可以直接定义，但由于没有构造函数，需要使用 useState() 来初始化状态值。

1	const [state, setState] = React.useState([initValue]);

useState() 返回一个数组，第一个是初始化的状态值，第二个是设置这个状态值的函数，可以使用解构的方法得到。

这样使用变量就可以直接使用无需 this.state，修改只需要 setState(newValue) 而无需 this.setState({key: newValue})。

像极了 Vue 中的组合式 API 和选项式 API 之间的关系。

但是如果需要在挂载后执行 fetch 操作，可能会出现死循环，fetch 到数据后，状态修改，函数从头执行……

在类组件中我们可以使用生命周期方法，那函数组件呢？

这里需要使用 useEffect，useEffect 是 React 中的一个 Hook，用于在函数组件中处理副作用（side effects）。副作用是指那些在组件渲染过程中需要执行但不直接产生 UI 的代码，比如数据获取、订阅、手动修改 DOM、记录日志等。

第一个参数是要执行的函数，函数可以返回一个函数，作为清理函数；

第二个参数是一个依赖数组，如果为空代表只执行一次；如果没有那么每次渲染都会执行；如果数组包含一个或多个变量，那么会在依赖发生变化时才会执行。

函数组件的参数就是用来接收 props 的，也是一个对象。

Syntax

style

可以在元素中添加 style 属性，但是属性值需要是一个对象，而由于变量需要用花括号包裹，所以需要用到两个花括号。

Falling Blog

React Note