内容汇总

本人技术栈是Vue,最近调部门改成用React开发,从头开始踩坑,持续更新中~

11月18日内容汇总

React 组件生命周期调用顺序

挂载

组件实例被创建并插入DOM
  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

更新

当组件的 props 或 state 发生变化时会触发更新
  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

卸载

当组件从 DOM 中移除时会进行调用
  • componentWillUnmount()

错误处理

当渲染过程,生命周期,或子组件的构造函数中抛出错误时会进行调用
  • static getDerivedStateFromError()
  • componentDidCatch()

更多内容参考:
常用生命周期方法

2.x 的生命周期函数与新版 Composition API 之间的映射关系:

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

注意:beforeCreatecreatedVue3 中已经由 setup 替代。

参考资料

Vue 3.0 有很多借鉴了 React 的地方,看了 React 文档之后 可以对比着看下 Vue 3.0 。

Vue 3.0 修炼手册
抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
API 手册 - Vue 组合式 API

Koa 快速入门系列

【从前端到全栈】- koa快速入门指南
【进阶篇】koa+Mysql的全栈之旅
【全栈之旅】NodeJs登录流程以及Token身份验证

11月17日内容汇总

React Hooks的用法

函数组件有重大限制,必须是纯函数,不能包含状态,也不支持生命周期方法。React Hooks 的设计目的,就是加强版函数组件,完全不使用"类",就能写出一个全功能的组件。

四个常用Hooks

useState()
useContext()
useReducer()
useEffect()

useState() 用于为函数组件引入状态(state)。纯函数不能有状态,所以把状态放在钩子里面。

import React, { useState } from "react";

export default function  Button()  {
  const [buttonText, setButtonText] = useState("Click me,   please");

  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }

  return  ;
}

useEffect()用来引入具有副作用的操作,最常见的就是向服务器请求数据。以前,放在componentDidMount里面的代码,现在可以放在useEffect()

useEffect(()  =>  {
 // 这里调接口
}, [dependencies])

useEffect() 接受两个参数。第一个参数是一个函数,异步操作的代码放在里面。第二个参数是一个数组,用于给出 Effect 的依赖项,可以省略。组件第一次渲染时, useEffect() 就会执行。当依赖项的数组发生变化, useEffect() 也会执行。

Vue 3.0 的 Composition API 借鉴了 React Hooks

轻松学会 React 钩子:以 useEffect() 为例 - 阮一峰
React Hooks 入门教程 - 阮一峰

React中Fragment的用法

与 Vue 类似, React 组件要求 return 的内容必须由唯一根元素包裹,否则就会报错。

如果希望在不额外创建DOM元素的情况下 return 多个元素,就可以用到Fragment。

render() {
  return (
    
      Some text.
      

A heading

); }
Vue 中的 template 也是虚拟元素,但还是有区别
在 template 中的元素必须要唯一根元素包裹
template 仅仅只是在条件渲染的时候可以不用引入新的DOM元素
Vue 3.0 中也提供了类似 React 的 Fragment

Fragment还有一种简写语法 <>可以接受键值或者属性,例如在列表渲染的时候绑定 key ,但是 <> 不行。

render() {
  return (
    <>
      Some text.
      

A heading

); }

另外react 16开始, render支持返回数组,可以减少不必要的节点嵌套。

export default function () {
    return [
        
1
,
2
,
3
]; }
Vue 3.0 的 render 函数同样也支持返回数组

Fragment - React中文文档

组件继承的两种写法

以上面的Fragment为例,如果只引入 React ,那么使用就要像这样

import React from "react";

function App() {
    return (
        
            {/* Some text here */}
        
    )
}

如果像下面这样引入,就可以像这样使用

import React, { Fragment } from "react";

function App() {
    return (
        
            {/* Some text here */}
        
    )
}

严格模式

嵌套在 标签中的元素将开启严格模式,用来突出显示应用程序中潜在问题。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

严格模式检查仅在开发模式下运行; 它们不会影响生产构建
import React from 'react';

function ExampleApplication() {
  return (
    
); }

React’s diff algorithm

11月16日内容汇总

React事件类型

输入框:onChange,onKeyUp
按钮:onClick

React监听回车事件


onKeyup(e) {
    if(e.keyCode === 13) {
        this.handleBtnClick()
    }
}

报错信息

Cannot update during an existing state transition (such as within render)

这个一般是事件处理函数的 this 没有绑定导致的 。

报错信息

Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field.

受控组件表单必须要绑定 onChange 事件,否则这个表单就是只读,无法修改。

不能修改的前提是 value 被赋了一个常量。如果将空值 null 赋给 value ,还是可以修改的。

受控组件:自身的value值由组件的state托管,这也是 React 官方推荐的。

上面的代码中, value 用来给表单赋值, onChange 事件用于触发事件处理函数修改 state 。在 Vue 中直接就是一个语法糖 v-model

非受控组件:value由第三方库或者DOM进行托管。

文件上传是典型的非受控组件。

React修改antd原生样式

在 Vue 中直接修改是不生效的,需要通过样式穿透 >>>::v-deep

在 React 里面,调出控制台找到组件对应的类名,然后在样式文件中直接修改就行。

React修改Antd组件样式的方法

你可能感兴趣的