React 开发必须知道的 34 个技巧【近1W字】

网友投稿 1186 2022-11-08

前言

React 是前端三大框架之一,在开发中也是一项技能; 本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的同学

源码地址

1 组件通讯

1.1 props

子组件

父组件

this.eightteenChildOneToFather(mode)}> // 或者复制代码

props 传多个值时: 传统写法

const {dataOne,dataTwo,dataThree} = this.state复制代码

升级写法

复制代码

1.2 props 升级版

原理:子组件里面利用 props 获取父组件方法直接调用,从而改变父组件的值注意: 此方法和 props 大同小异,都是 props 的应用,所以在源码中没有举例

调用父组件方法改变该值

// 父组件state = { count: {}}changeParentState = obj => { this.setState(obj);}// 子组件onClick = () => { this.props.changeParentState({ count: 2 });}复制代码

1.3 Provider,Consumer和Context

1.Context在 16.x 之前是定义一个全局的对象,类似 vue 的 eventBus,如果组件要使用到该值直接通过this.context获取

//根组件class MessageList extends React.Component { getChildContext() { return {color: "purple",text: "item text"}; } render() { const {messages} = this.props || {} const children = messages && messages.map((message) => ); return

{children}

; }}MessageList.childContextTypes = { color: React.PropTypes.string text: React.PropTypes.string};//中间组件class Message extends React.Component { render() { return (

); }}//孙组件(接收组件)class MessageItem extends React.Component { render() { return (

{this.context.text}

); }}MessageItem.contextTypes = { text: React.PropTypes.string //React.PropTypes在 15.5 版本被废弃,看项目实际的 React 版本};class Button extends React.Component { render() { return ( ); }}Button.contextTypes = { color: React.PropTypes.string};复制代码

import React from 'react'let { Consumer, Provider } = React.createContext();//创建 context 并暴露Consumer和Provider模式export { Consumer, Provider}复制代码

父组件导入

// 导入 Providerimport {Provider} from "../../utils/context"

父组件定义的值:{name}

复制代码

子组件

// 导入Consumerimport { Consumer } from "../../utils/context"function Son(props) { return ( //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值 {name => (

// 在 Consumer 中可以直接通过 name 获取父组件的值

子组件。获取父组件的值:{name}

)} );}export default Son;复制代码

1.4 EventEmitter

EventEmiter 传送门使用 events 插件定义一个全局的事件机制

1.5 路由传参

1.params

xxxthis.props.history.push({pathname:"/path/" + name});读取参数用:this.props.match.params.name复制代码

2.query

this.props.history.push({pathname:"/query",query: { name : 'sunny' }});读取参数用: this.props.location.query.name复制代码

3.state

this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});读取参数用: this.props.location.query.state 复制代码

4.search

xxxthis.props.history.push({pathname:`/web/search?id ${row.id}`});读取参数用: this.props.location.search复制代码

这个在 react-router-dom: v4.2.2有 bug,传参跳转页面会空白,刷新才会加载出来

5.优缺点

1.params在HashRouter和BrowserRouter路由中刷新页面参数都不会丢失2.state在BrowserRouter中刷新页面参数不会丢失，在HashRouter路由中刷新页面会丢失3.query：在HashRouter和BrowserRouter路由中刷新页面参数都会丢失4.query和 state 可以传对象复制代码

1.6 onRef

原理:onRef 通讯原理就是通过 props 的事件机制将组件的 this(组件实例)当做参数传到父组件,父组件就可以操作子组件的 state 和方法

EightteenChildFour.jsx

eighteen.jsx

eightteenChildFourRef = (ref)=>{ console.log('eightteenChildFour的Ref值为') // 获取的 ref 里面包括整个组件实例 console.log(ref) // 调用子组件方法 ref.click()}复制代码

1.7 ref

原理:就是通过 React 的 ref 属性获取到整个子组件实例,再进行操作

EightteenChildFive.jsx

eighteen.jsx

// 钩子获取实例componentDidMount(){ console.log('eightteenChildFive的Ref值为') // 获取的 ref 里面包括整个组件实例,同样可以拿到子组件的实例 console.log(this.refs["eightteenChildFiveRef"]) }// 组件定义 ref 属性复制代码

1.8 redux

redux 是一个独立的事件通讯插件,这里就不做过多的叙述请戳传送门:

1.9 MobX

MobX 也是一个独立的事件通讯插件,这里就不做过多的叙述请戳传送门:

1.10 flux

flux 也是一个独立的事件通讯插件,这里就不做过多的叙述请戳传送门:

1.11 hooks

1.hooks 是利用 userReducer 和 context 实现通讯,下面模拟实现一个简单的 redux 2.核心文件分为 action,reducer,types action.js

import * as Types from './types';export const onChangeCount = count => ({ type: Types.EXAMPLE_TEST, count: count + 1})复制代码

reducer.js

import * as Types from "./types";export const defaultState = { count: 0};export default (state, action) => { switch (action.type) { case Types.EXAMPLE_TEST: return { ...state, count: action.count }; default: { return state; } }};复制代码

types.js

export const EXAMPLE_TEST = 'EXAMPLE_TEST';复制代码

eightteen.jsx

export const ExampleContext = React.createContext(null);//创建createContext上下文// 定义组件function ReducerCom() { const [exampleState, exampleDispatch] = useReducer(example, defaultState); return ( );}复制代码

EightteenChildThree.jsx // 组件

3.hooks其实就是对原有React 的 API 进行了封装,暴露比较方便使用的钩子;

4.钩子有:

钩子名	作用
useState	初始化和设置状态
useEffect	componentDidMount，componentDidUpdate和componentWillUnmount和结合体,所以可以监听useState定义值的变化
useContext	定义一个全局的对象,类似 context
useReducer	可以增强函数提供类似 Redux 的功能
useCallback	记忆作用,共有两个参数，第一个参数为一个匿名函数，就是我们想要创建的函数体。第二参数为一个数组，里面的每一项是用来判断是否需要重新创建函数体的变量，如果传入的变量值保持不变，返回记忆结果。如果任何一项改变，则返回新的结果
useMemo	作用和传入参数与 useCallback 一致,useCallback返回函数,useDemo 返回值
useRef	获取 ref 属性对应的 dom
useImperativeMethods	自定义使用ref时公开给父组件的实例值
useMutationEffect	作用与useEffect相同，但在更新兄弟组件之前，它在React执行其DOM改变的同一阶段同步触发
useLayoutEffect	作用与useEffect相同，但在所有DOM改变后同步触发

5.useImperativeMethods

1.12 slot

slot 就是将父组件的标签传给子组件,类似vue 的 v-slot 场景:有些组件只是共用部分dom 逻辑,里面有部分逻辑是独立的

// 父组件文件import SlotChild from 'SlotChild'这是父组件的 slot

}>// 子组件子组件直接获取 this.props.slot 就可获取到内容复制代码

1.13 对比

方法	优点	缺点
props	不需要引入外部插件	兄弟组件通讯需要建立共同父级组件,麻烦
props 升级版	不需要引入外部插件,子传父,不需要在父组件用方法接收	同 props
Provider,Consumer和Context	不需要引入外部插件,跨多级组件或者兄弟组件通讯利器	状态数据状态追踪麻烦
EventEmitter	可支持兄弟,父子组件通讯	要引入外部插件
路由传参	可支持兄弟组件传值,页面简单数据传递非常方便	父子组件通讯无能为力
onRef	可以在获取整个子组件实例,使用简单	兄弟组件通讯麻烦,官方不建议使用
ref	同 onRef	同 onRef
redux	建立了全局的状态管理器,兄弟父子通讯都可解决	引入了外部插件
mobx	建立了全局的状态管理器,兄弟父子通讯都可解决	引入了外部插件
flux	建立了全局的状态管理器,兄弟父子通讯都可解决	引入了外部插件
hooks	16.x 新的属性,可支持兄弟,父子组件通讯	需要结合 context 一起使用
slot	支持父向子传标签

redux , mobx和flux对比

方法	介绍
redux	1.核心模块:Action,Reducer,Store;2. Store 和更改逻辑是分开的;3. 只有一个 Store;4. 带有分层 reducer 的单一 Store;5. 没有调度器的概念;6. 容器组件是有联系的;7. 状态是不可改变的;8.更多的是遵循函数式编程思想
mobx	1.核心模块:Action,Reducer,Derivation;2.有多个 store;3.设计更多偏向于面向对象编程和响应式编程，通常将状态包装成可观察对象，一旦状态对象变更，就能自动获得更新
flux	1.核心模块:Store,ReduceStore,Container;2.有多个 store;

2.require.context()

这个是 webpack 的 api,这个在 vue 技巧中有介绍,因为 Vue 和 React 工程都是基于 webpack打包,所以在 react 也可以使用

const path = require('path')const files = require.context('@/components/home', false, /\.vue$/)const modules = {}files.keys().forEach(key => { const name = path.basename(key, '.vue') modules[name] = files(key).default || files(key)})复制代码

3.Decorator

定义:decorator是ES7的一个新特性，可以修改class的属性

import React from 'react'import Test from '../../utils/decorators'@Test//只要Decorator后面是Class，默认就已经把Class当成参数隐形传进Decorator了。class TwentyNine extends React.Component{ componentDidMount(){ console.log(this,'decorator.js') // 这里的this是类的一个实例 console.log(this.testable) } render(){ return (

这是技巧23

) }}export default TwentyNine复制代码

decorators.js

function testable(target) { console.log(target) target.isTestable = true; target.prototype.getDate = ()=>{ console.log( new Date() ) }}export default testable复制代码

很多中间件,像 redux 里面就封装了Decorator的使用

4.使用 if…else

场景:有些时候需要根据不同状态值页面显示不同内容

import React from "react";export default class Four extends React.Component { state = { count: 1 }; render() { let info if(this.state.count===0){ info=( 这是数量为 0 显示 ) } else if(this.state.count===1){ info=( 这是数量为 1 显示 ) } return (

{info}

); }}复制代码

5.state 值改变的五种方式

方式 1

let {count} = this.statethis.setState({count:2})复制代码

方式 2:callBack

this.setState(({count})=>({count:count+2}))复制代码

方式 3:接收 state 和 props 参数

this.setState((state, props) => { return { count: state.count + props.step };});复制代码

方式 4:hooks

const [count, setCount] = useState(0)// 设置值setCount(count+2)复制代码

方式 5:state 值改变后调用

this.setState( {count:3},()=>{ //得到结果做某种事 })复制代码

6.监听states 变化

1.16.x 之前使用componentWillReceiveProps

componentWillReceiveProps (nextProps){ if(this.props.visible !== nextProps.visible){ //props 值改变做的事 }}复制代码

注意:有些时候componentWillReceiveProps在 props 值未变化也会触发,因为在生命周期的第一次render后不会被调用，但是会在之后的每次render中被调用 = 当父组件再次传送props

2.16.x 之后使用getDerivedStateFromProps,16.x 以后componentWillReveiveProps也未移除

7.组件定义方法

方式 1:ES5 的Function 定义

function FunCom(props){ return

这是Function 定义的组件

}ReactDOM.render(, mountNode)// 在 hooks 未出来之前,这个是定义无状态组件的方法,现在有了 hooks 也可以处理状态复制代码

方式 2: ES5的 createClass 定义

const CreateClassCom = React.createClass({ render: function() { return

这是React.createClass定义的组件

}});复制代码

方式 3:ES6 的 extends

class Com extends React.Component { render(){ return(

这是React.Component定义的组件

) }}复制代码

调用

export default class Seven extends React.Component { render() { return (

); }}复制代码

区别: ES5的 createClass是利用function模拟class的写法做出来的es6; 通过es6新增class的属性创建的组件此组件创建简单.

8.通过 ref 属性获取 component

方式 1:也是最早的用法,通过 this.refs[属性名获取] 也可以作用到组件上,从而拿到组件实例

class RefOne extends React.Component{ componentDidMount() { this.refs['box'].innerHTML='这是 div 盒子,通过 ref 获取' } render(){ return(

) }}复制代码

方式 2:回调函数,在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，都是获取其引用

class RefTwo extends React.Component{ componentDidMount() { this.input.value='这是输入框默认值'; this.input.focus(); } render(){ return( { this.input = comp; }}/> ) }}复制代码

方式 3:React.createRef() React 16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性,将能拿到dom节点或组件的实例

class RefThree extends React.Component{ constructor(props){ super(props); this.myRef=React.createRef(); } componentDidMount(){ console.log(this.myRef.current); } render(){ return }}复制代码

方式 4:React.forwardRef React 16.3版本后提供的，可以用来创建子组件，以传递ref

class RefFour extends React.Component{ constructor(props){ super(props); this.myFourRef=React.forwardRef(); } componentDidMount(){ console.log(this.myFourRef.current); } render(){ return }}复制代码

子组件通过React.forwardRef来创建，可以将ref传递到内部的节点或组件，进而实现跨层级的引用。forwardRef在高阶组件中可以获取到原始组件的实例.这个功能在技巧 18 会着重讲

9.static 使用

export default class Nine extends React.Component { static update(data) { console.log('静态方法调用执行啦') } render() { return (

这是 static 关键字技能

); }}Nine.update('2')复制代码

注意: 1.ES6的class，我们定义一个组件的时候通常是定义了一个类，而static则是创建了一个属于这个类的属性或者方法 2.组件则是这个类的一个实例，component的props和state是属于这个实例的，所以实例还未创建 3.所以static并不是react定义的，而加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用,所以也是无法访问到 this 4.getDerivedStateFromProps也是通过静态方法监听值,详情请见技巧 6

10.constructor和super

回顾: 1.谈这两个属性之前,先回顾一下ES6 函数定义方法 2.每一个使用class方式定义的类默认都有一个constructor函数，这个函数是构造函数的主函数，该函数体内部的this指向生成的实例 3.super关键字用于访问和调用一个对象的父对象上的函数

export default class Ten extends React.Component { constructor() { // class 的主函数 super() // React.Component.prototype.constructor.call(this),其实就是拿到父类的属性和方法 this.state = { arr:[] } } render() { return (

这是技巧 10

); }}复制代码

11.PropTypes

场景:检测传入子组件的数据类型类型检查PropTypes自React v15.5起已弃用，请使用prop-types 方式 1:旧的写法

class PropTypeOne extends React.Component { render() { return (

{this.props.email}

{this.props.name}

); }}PropTypeOne.propTypes = { name: PropTypes.string, //值可为array,bool,func,number,object,symbol email: function(props, propName, componentName) { //自定义校验 if ( !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test( props[propName] ) ) { return new Error( "组件" + componentName + "里的属性" + propName + "不符合邮箱的格式" ); } },};复制代码

方法 2:利用 ES7 的静态属性关键字 static

class PropTypeTwo extends React.Component { static propTypes = { name:PropTypes.string }; render() { return (

{this.props.name}

); }}复制代码

class Counter extends Component { state = { value: 0 }; handleIncrement = () => { this.setState(prevState => ({ value: prevState.value + 1 })); }; handleDecrement = () => { this.setState(prevState => ({ value: prevState.value - 1 })); }; render() { return (

{this.state.value}

) }}复制代码

13.异步组件

1.场景:路由切换,如果同步加载多个页面路由会导致缓慢

2.核心 API: loader:需要加载的组件 loading:未加载出来的页面展示组件 delay:延迟加载时间 timeout:超时时间

3.使用方法: 安装 react-loadable ,babel插件安装 syntax-dynamic-import. react-loadable是通过webpack的异步import实现的

const Loading = () => { return

;};const LoadableComponent = Loadable({ loader: () => import("../../components/TwoTen/thirteen"), loading: Loading});export default class Thirteen extends React.Component { render() { return ; }}复制代码

4.Loadable.Map() 并行加载多个资源的高阶组件

14.动态组件

场景:做一个 tab 切换时就会涉及到组件动态加载实质上是利用三元表达式判断组件是否显示

class FourteenChildOne extends React.Component { render() { return

这是动态组件 1

; }}class FourteenChildTwo extends React.Component { render() { return

这是动态组件 2

; }}export default class Fourteen extends React.Component { state={ oneShowFlag:true } tab=()=>{ this.setState({oneShowFlag:!this.state.oneShowFlag}) } render() { const {oneShowFlag} = this.state return (

{oneShowFlag?:}

); }}复制代码

如果是单个组件是否显示可以用短路运算

oneShowFlag&&复制代码

15.递归组件

场景:tree组件利用React.Fragment或者 div 包裹循环

class Item extends React.Component { render() { const list = this.props.children || []; return (

{list.map((item, index) => { return (

{item.name}

{// 当该节点还有children时，则递归调用本身 item.children && item.children.length ? ( {item.children} ) : null} ); })}

); }}复制代码

16.受控组件和不受控组件

受控组件:组件的状态通过React 的状态值 state 或者 props 控制

class Controll extends React.Component { constructor() { super(); this.state = { value: "这是受控组件默认值" }; } render() { return

{this.state.value}

; }}复制代码

不受控组件:组件不被 React的状态值控制,通过 dom 的特性或者React 的ref 来控制

class NoControll extends React.Component { render() { return

{this.props.value}

; }}复制代码

导入代码:

export default class Sixteen extends React.Component { componentDidMount() { console.log("ref 获取的不受控组件值为", this.refs["noControll"]); } render() { return (

); }}复制代码

17.高阶组件(HOC)

17.1 定义

1.就是类似高阶函数的定义,将组件作为参数或者返回一个组件的组件; 2.作用: 抽取重复代码，实现组件复用，常见场景,页面复用; 条件渲染，控制组件的渲染逻辑（渲染劫持），常见场景,权限控制; 捕获/劫持被处理组件的生命周期，常见场景,组件渲染性能追踪、日志打点

17.2 实现方法

1.属性代理

import React,{Component} from 'react';const Seventeen = WrappedComponent => class extends React.Component { render() { const props = { ...this.props, name: "这是高阶组件" }; return ; } };class WrappedComponent extends React.Component { state={ baseName:'这是基础组件' } render() { const {baseName} = this.state const {name} = this.props return

基础组件值为{baseName}

通过高阶组件属性代理的得到的值为{name}

}}export default Seventeen(WrappedComponent)复制代码

2.反向继承原理就是利用 super 改变改组件的 this 方向,继而就可以在该组件处理容器组件的一些值

const Seventeen = (WrappedComponent)=>{ return class extends WrappedComponent { componentDidMount() { this.setState({baseName:'这是通过反向继承修改后的基础组件名称'}) } render(){ return super.render(); } }}class WrappedComponent extends React.Component { state={ baseName:'这是基础组件' } render() { const {baseName} = this.state return

基础组件值为{baseName}

}}export default Seventeen(WrappedComponent);复制代码

18.元素是否显示

一般用三元表达式

flag?

显示内容

:'' flag&&

显示内容

复制代码

19.Dialog 组件创建

Dialog 应该是用的比较多的组件,下面有三种不同的创建方法方式 1:通过 state 控制组件是否显示

class NineteenChildOne extends React.Component { render() { const Dialog = () =>

这是弹层1

; return this.props.dialogOneFlag &&

标签：js 数据

暂时没有评论，来抢沙发吧~

React 开发必须知道的 34 个技巧【近1W字】

{item.name}

最近发表

更多内容

推荐文章

解决方案

热评文章