React基础 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第4天

React是一个用于构建UI的JS库。你可以说它的竞争对手有AngularJS，Ember.js，Backbone和Polymer，尽管React专注的领域要小得多。React仅仅是MVC架构中的V，即视图层。

React的组件使用特定的声明式样式书写，不像jQuery或其它传统JS库，你不与DOM直接交互。当背后的数据改变时，React接管所有的UI更新。

React还非常快，这归功于Virtual DOM和幕后的diff算法。当数据改变时，React计算所需要操作的最少的DOM，然后高效的重新渲染组件。比如，如果页面上有10000个已经渲染的元素，但只有一个元素改变，React将仅仅更新其中一个DOM，这是React为何能高效的重新渲染整个组件的原因。

第一个react组件

import React from 'react'

// 类组件
class App extends React.Component {
  render () {
    return (
      <div>
        <h2>hello world!</h2>
        <input type="text" />
      </div>
    )
  }
}
export default App

注意：每个组件都应该坚持单一职责原则，如果你发现你的组件做的事情太多，也许最好将它分成子组件。不过话虽如此，我首先还是编写了一个典型的的单块组件，当它能够工作后，然后将它重构为小的子组件。

路由配置

安装yarn add react-router-dom@6或者npm install react-router-dom

在src下新建一个route/index.js文件
主要用到三个函数BrowserRouter，Routes，Route

import App from '../App13'
import Home from '../pages/Home'
import List from '../pages/List'
import Detail from '../pages/Detail'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
/**
 * App>Home+List+Detail
 * react-router-dom 中有两种模式 : BrowserRouter(History模式)  HashRouter(Hash模式)
 */
// 定义一个路由
const BaseRouter = () => (
  <BrowserRouter>
    <Routes>
      <Route path='/' element={<App />}>
        <Route path='/home' element={<Home />}></Route>
        <Route path='/list' element={<List />}></Route>
        <Route path='/detail' element={<Detail />}></Route>
      </Route>
    </Routes>
  </BrowserRouter>
)
export default BaseRouter

React 组件生命周期

组件的生命周期可分成三个状态：

• Mounting(挂载)：已插入真实 DOM
• Updating(更新)：正在被重新渲染
• Unmounting(卸载)：已移出真实 DOM

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

• constructor(): 在 React 组件挂载之前，会调用它的构造函数。
• getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
• render(): render() 方法是 class 组件中唯一必须实现的方法。
• componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。

更新

每当组件的 state 或 props 发生变化时，组件就会更新。

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

• getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
• shouldComponentUpdate():当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
• render(): render() 方法是 class 组件中唯一必须实现的方法。
• getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。
• componentDidUpdate(): 在更新后会被立即调用。

卸载

当组件从 DOM 中移除时会调用如下方法：

• componentWillUnmount(): 在组件卸载及销毁之前直接调用。

这里我们仅仅浅尝辄止了React的内容，但这应该已经足以展示React的一般概念和它的优点了。