React基础

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 看做 componentDidMountcomponentDidUpdatecomponentWillUnmount 这三个函数的组合。

语法:

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 对象中一般有两个属性:typepayload

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

reducer:是一个函数,作用是用于同步更新状态。reducer() 函数要是一个“纯函数”,该函数接收 state 与 action 作为参数(即:reducer(state, action)),返回计算后生成的新的 state 数据。

dispatch:是一个函数,传递 action 作为参数。redux 中的 reducer() 函数不能直接调用,而是需要调用 dispatch(action) 来触发 action 执行 reducer 的调用以更新状态。

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

  • 仅使用 stateaction 参数计算新的状态值
  • 禁止直接修改 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-reduxProvider 组件,保存应用中需要使用到的 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值