博客

React基础

  • Post author:
  • Post category:其他




React


官网



create-react-app

脚手架，利用它来创建项目基本结构 

$ npx create-react-app <project-name>

创建项目时，会根据模板自动安装如下主要使用到的包：

  • react：核心包
  • react-dom：用于浏览器渲染使用到的包（了解 react-native 用于原生应用渲染）
  • react-scripts：封装了对 webpack 的配置



npm scripts

可以使用

npm run

运行： 

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}
  • start：启动开发环境任务
  • build：启动构建任务（构建生产环境下使用到的资源）
  • test：启动测试任务
  • eject：弹出 webpack 的配置到项目本地（将 webpack 的配置还原到项目目录下，这种弹出操作是不可撤销的）



JSX

既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。

建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

在 JSX 中嵌入 JS 表达式，使用

{}

语法。

JSX 是一个语法糖，是

React.createElement()

函数的语法糖。

底层虚拟 DOM 比较算法：diff、fiber



组件



函数组件

// 函数组件
const Element = function(props) {
  return (
    <h1>你好，{ props.message }</h1>
  )
}



class 组件

// class 组件
class MyElement extends React.Component {
  render() {
    return <h1>Hello { this.props.message }</h1>
  }
}



注意事项：

  • 组件名首字母必须大写

  • 渲染组件：利用组件名作为标签名进行组件使用，可为组件传递属性（属性是一个对象）

    • 函数组件接收到的属性作为函数参数使用
    • class 组件接收到的属性在方法中使用

      this.props

      调用

  • JSX 所表示的 React 元素必须使用单个根节点包裹

  • class 组件继承自

    React.Component

    父类，必须实现 render() 方法。



React.Fragment 组件

JSX 所表示的 React 元素必须使用单个根节点包裹，如果在渲染的 DOM 树中不想有多余的包裹节点，可以使用

<React.Fragment />

组件进行包裹。

可简写为

<></>



组件通信



父子

  • 父 -> 子：使用属性
  • 子 -> 父：利用属性，将父组件中的函数引用传递到子组件中，当子组件需要传递数据的时候，调用在属性中接收到的函数并传递参数即可。



跨组件层级

  • 转换为父子通信，会在每一层中添加 props 来传递数据(繁琐)
  • Context
  • redux、mobx、flux 等状态管理库



state 状态

组件内部私有数据，是可以在组件内部实现对 state 修改的操作。

关于 state 的三件事：

  • 不要直接修改 state 的值：直接修改 state 不会重新渲染组件，调用 setState() 方法修改 state 数据值才会响应式重新渲染，构造函数是唯一给 state 赋值的地方。
  • state 的更新可能是异步的
  • state 的更新会被合并



Props 属性

props 是组件从父组件所接收到的属性对象数据。

要实现属性验证，可以使用

prop-types

包来实现运行时类型检测，或使用 TypeScript (ts) 来实现静态类型检测。



prop-types

运行时类型检测



Props 的只读性

组件的属性应该是只读的，不要尝试修改组件的属性值


所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

如果有修改 props 的打算，可能需要重新设计，看是否可用 state 来实现。



Ref

引用原生 DOM 节点或组件实例

  • 字符串 ref —- (与 vue 中的 ref 类似)已标记为过时的，在实际开发过程中不建议再使用
  • createRef() —- 创建出 Ref 对象，将其使用

    ref

    属性绑定在 DOM 元素或组件上，调用该 Ref 对象的

    current

    属性即可获取关联的对象



Context

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

Context 就是在全局范围内实现多个组件共享资源保存的一个对象。

Context 中可以保存的数据有：地区偏好，UI 主题，语言环境设置，用户登录的状态信息…



API

  • React.createContext()
  • Provider：生产组件，其后代组件中可以使用

    <Consumer>

    组件来获取在 value 属性中保存的数据，

    <Consumer>

    组件能够订阅 value 的变化。
  • Consumer：消费组件，以函数作为子节点，函数的参数是 Provider 组件 value 属性的值
  • class.contextType：这是类的静态 contextType 属性，为 contextType 设置一个 Context 对象，则在类的成员方法中，可以使用

    this.context

    获取到在

    Provider

    组件中保存在 value 里的值



生命周期

可以在组件中重写生命周期钩子函数，以便在特定阶段能够执行自定义的任务

生命周期钩子函数存在于 class 组件中，在函数组件中没有这些钩子函数。


生命周期图谱



挂载阶段

  • constructor()：构造函数，初始化 state、绑定事件处理程序的 this
  • render()：渲染
  • componentDidMount()：在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

注意：


componentWillMount()

钩子函数已过时，不建议再使用



更新阶段

  • shouldComponentUpdate()：通常这个方法是为了优化，方法返回 boolean 值，true表示继续向后渲染，false表示中断渲染。

  • render()：渲染

  • componentDidUpdate()：



卸载阶段

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



高阶组件

高阶组件（HOC – Higher Order Component）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式（装饰者模式）。


高阶组件是参数为组件，返回值为新组件的函数



Hook


Hook

是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

hook 是在函数组件中使用到 class 组件中的 React 特性的技术。



state hook

在函数组件中可以使用到类似于 class 组件的 state。

语法： 

const [stateName, setStateName] = useState(initialValue)

useState() 调用后返回一个数组，数组的第一个元素是状态数据，第二个元素是修改状态数据的方法。



effect hook

可以让你在函数组件中执行副作用操作

如果你熟悉 React class 的生命周期函数，你可以把

useEffect

Hook 看做

componentDidMount

，

componentDidUpdate

和

componentWillUnmount

这三个函数的组合。

语法： 

useEffect(callback[, array])

// componentDidMount()
useEffect(() => {
    // callback
}, []) // 数组是空数组，没有依赖项

// componentDidUpdate()
useEffect(() => {
    // callback
}, [var1, var2]) // 当数组中的依赖项发生改变时，重新执行 callback

// componentDidMount()
useEffect(() => {
    // callback
    
    // 在 callback 回调函数中 return 的函数，相当于是 componentWillUnmount()
    return () => {
        // return back
    }
}, [])



Redux


中文网

状态管理模式，是 JS 应用的状态容器，提供可预测的状态管理。

redux 与 react 没有任何关系。



概念

store：仓库

state：状态，是各组件需要全局共享的数据

action：是一个普通的 JavaScript 对象，通常用于

描述应用程序中发生了什么的事件

。在 action 对象中一般有两个属性：

type

与

payload

action creator：是一个函数，主要用于创建出 action 对象

reducer：是一个函数，作用是用于同步更新状态。reducer() 函数要是一个“纯函数”，该函数接收 state 与 action 作为参数（即：

reducer(state, action)

），返回计算后生成的新的 state 数据。

dispatch：是一个函数，传递 action 作为参数。redux 中的 reducer() 函数不能直接调用，而是需要调用

dispatch(action)

来触发 action 执行 reducer 的调用以更新状态。

**注意：**Reducer 必需符合以下规则：

  • 仅使用

    state

    和

    action

    参数计算新的状态值
  • 禁止直接修改

    state

    。必须通过复制现有的

    state

    并对复制的值进行更改的方式来做

    不可变更新（immutable updates）

    。
  • 禁止任何异步逻辑、依赖随机值或导致其他“副作用”的代码



三大原则



单一数据源

一个应用有只一个 store，在 store 中保存唯一的一棵状态树



State 是只读的


唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。



使用纯函数来执行修改


为了描述 action 如何改变 state tree ，你需要编写 reducers。



react-redux

redux 与 react 没有关系，所以在 react 中如果需要使用到 redux，则需要安装 react-redux 绑定库（作用是将 react 与 redux 关联）


官网



安装

$ yarn add react-redux



API


  • <Provider>

    组件：保存在应用中使用到的 store
  • connect(mapStateToProps, mapDispatchToProps)：在组件中连接 redux 的 store 进行使用

    • connect() 返回一个 HOC 函数，使用其返回值包裹待功能增强的组件
    • mapStateToProps 是一个函数，传递 state 作为参数，返回普通对象，该返回的对象会被合并到被包裹的组件的 props 中
    • mapDispatchToProps 是一个函数，传递 dispatch 作为参数，返回普通对象，返回的对象中通常是一个个的方法，在方法体内部调用到 dispatch(action) 进行状态更新。mapDispatchToProps() 函数返回的对象会被合并到被包裹的组件的 props 中



使用步骤

  1. 安装 redux 与 react-redux
  2. 创建 reducer ( 通常是放在 reducers 目录中)
  3. 创建 action creator（用于生成 action 对象，通常放置在 actions 目录中）
  4. 创建 store（通常放置在 store 目录中）
  5. 在应用入口 index.js 文件中，引入

    react-redux

    的

    Provider

    组件，保存应用中需要使用到的 store
  6. 在组件中调用

    react-redux

    绑定库中的

    connect()

    方法，在组件中连接 redux 的 store



异步 action


文档

安装 redux-thunk 中间件来处理。

Action creator 函数中，可返回普通的 action 对象，也可以返回一个函数。

如果 action creator 中返回的是一个函数，这个函数会被 Redux Thunk middleware自动调用执行。

这个函数并不需要保持纯净；它还可以带有副作用，包括执行异步 API 请求。这个函数还可以 dispatch action，就像 dispatch 前面定义的同步 action 一样。



React Router

前端路由：在 SPA 应用中，当路由导航切换时，不会向服务器发送新的请求，而是通过 JavaScript 来处理导航的切换效果。

前端路由模式：hash、history


官网

包资源：

  • react-router：核心包
  • react-router-dom：与浏览器相关的路由包
  • react-router-native：与 react-natvie 开发相关使用到的路由包



安装

$ npm i react-router-dom



API


  • <HashRouter>

    – hash 模式的路由

  • <BrowserRouter>

    – history 模式的路由

  • <Link>

    – 链接

  • <Route>

    – 路由配置

  • <Redirect>

    – 重定向

  • <Switch>

    – 分支选择

  • withRouter()

    – HOC、高阶组件，可将路由的 history、location、match 对象合并到组件的 props 中



UI 组件库


ant.design


版权声明：本文为dubass原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。