react

什么是 React

React 是 Facebook 开发的一款 JS UI 库，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟 DOM 来有效地操作 DOM。它遵循从高阶组件到低阶组件的单向数据流。

主要原理 Virtual DOM

传统的 web 应用，操作 DOM 一般是直接更新操作的，但是我们知道 DOM 更新通常是比较昂贵的。而 React 为了尽可能减少对 DOM 的操作，提供了一种不同的而又强大的方式来更新 DOM，代替直接的 DOM 操作。就是 Virtual DOM,一个轻量级的虚拟的 DOM，就是 React 抽象出来的一个对象，描述 dom 应该什么样子的，应该如何呈现。通过这个 Virtual DOM 去更新真实的 DOM，由这个 Virtual DOM 管理真实 DOM 的更新。

什么是 JSX

JSX 是 javascript 的语法扩展。它就像一个拥有 javascript 全部功能的模板语言。它生成 React 元素，这些元素将在 DOM 中呈现。
例:

import React from "react";
import ReactDOM from "react-dom";

const name = "World";
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  <React.StrictMode>element,</React.StrictMode>,
  document.getElementById("root") // "Hello, World"
);

生命周期

类似 vue 生命周期(大体分三类 Mount, Update, Unmount), 不多阐述, 直接上图

组件的 State 与 Props

渲染组件

function Welcome(props) { return
<h1>Hello, {props.name}</h1>
; } const element = <Welcome name="Sara" />; ReactDOM.render( element,s
document.getElementById('root') );

如上, Welcome 就是用户自定义组件, 对象 name 就称之为”props”。

state 及状态改变

class Clock extends React.Component { constructor(props) { super(props); // 继承父类的this对象
this.state = {date: new Date()}; } render() { return (
<div>
  <h1>Hello, world!</h1>
  <h2>It is { this.state.date.toLocaleTimeString() }.</h2>
</div>
} } } ReactDOM.render(
<Clock />, document.getElementById('root') );

正确使用 state

1
2
3

// Wrong this.state.comment = 'Hello'; // Correct this.setState({comment: 'Hello'}); // Wrong
this.setState({ counter: this.state.counter + this.props.increment, }); // Correct
this.setState((state, props) => ({ counter: state.counter + props.increment }));