React是前端三大框架之一，在开发中也是一项技能；这里从实际开发中总结了React开发的一些技巧，适合React初学或者有一定项目经验的同学。
1、组件通讯
1.1道具
子组件
import React from "react";import PropTypes from "prop-types";import { Button } from "antd";export default class EightteenChildOne extends React.Component { static propTypes = { //propTypes校验传入类型,详情在技巧11 name: PropTypes.string }; click = () => { // 通过触发方法子传父 this.props.eightteenChildOneToFather("这是 props 改变父元素的值"); }; render() { return (
这是通过 props 传入的值{this.props.name}
点击改变父元素值 ); }}
父组件
this.eightteenChildOneToFather(mode)}> // 或者传传值时：
传统写法
const {dataOne,dataTwo,dataThree} = this.state升级写法
1.2道具升级版
原理：子组件里面利用props获取父组件方法直接调用，从而改变父组件的值
注意：此方法和props大同小异，都是props的应用，所以在源码中没有模仿
调用父组件方法改变该值
// 父组件state = { count: {}}changeParentState = obj => { this.setState(obj);}// 子组件onClick = () => { this.props.changeParentState({ count: 2 });}1.3提供者，消费者和上下文
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 (
Delete
); }}//孙组件(接收组件)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 ( {this.props.children} ); }}Button.contextTypes = { color: React.PropTypes.string};
2.16.x之后的上下文使用了提供商和客户模式，在某些提供商的初始值，在子孙级的消费者中获取该值，并且能够传递函数，修改了上下文声明了一个上下文的定义，上下文.js
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传送门 使用事件插件定义一个类别的事件机制
1.5路由传参
1.参数
xxxthis.props.history.push({pathname:"/path/" + name});读取参数用:this.props.match.params.name2.查询
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});读取参数用: this.props.location.query.name3.状态
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});读取参数用: this.props.location.query.state4.搜索
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(组件实例)当做参数传到父组件，父组件就可以操作子组件的状态和方法
jsx
export default class EightteenChildFour extends React.Component { state={ name:'这是组件EightteenChildFour的name 值' } componentDidMount(){ this.props.onRef(this) console.log(this) // ->将EightteenChildFour传递给父组件this.props.onRef()方法 } click = () => { this.setState({name:'这是组件click 方法改变EightteenChildFour改变的name 值'}) }; render() { return (
{this.state.name}
点击改变组件EightteenChildFour的name 值 ); }}
seven.jsx
eightteenChildFourRef = (ref)=>{ console.log('eightteenChildFour的Ref值为') // 获取的 ref 里面包括整个组件实例 console.log(ref) // 调用子组件方法 ref.click()}1.7参考
原理：就是通过React的ref属性获取到整个子组件实例，再进行操作
.jsx
// 常用的组件定义方法export default class EightteenChildFive extends React.Component { state={ name:'这是组件EightteenChildFive的name 值' } click = () => { this.setState({name:'这是组件click 方法改变EightteenChildFive改变的name 值'}) }; render() { return (
{this.state.name}
点击改变组件EightteenChildFive的name 值 ); }}
seven.jsx
// 钩子获取实例componentDidMount(){ console.log('eightteenChildFive的Ref值为') // 获取的 ref 里面包括整个组件实例,同样可以拿到子组件的实例 console.log(this.refs["eightteenChildFiveRef"]) }// 组件定义 ref 属性1.8 Redux
redux是一个独立的事件通讯插件，这里就不做过多的叙述
1.9 MobX
MobX也是一个独立的事件通讯插件，这里就不做过多的叙述
1.10通量
flux也是一个独立的事件通讯插件，这里就不做过多的叙述
1.11挂钩
1.hooks是利用userReducer和context实现通讯，下面模拟实现一个简单的redux
2.核心文件分为action，reducer，键入
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';18.jsx
export const ExampleContext = React.createContext(null);//创建createContext上下文// 定义组件function ReducerCom() { const [exampleState, exampleDispatch] = useReducer(example, defaultState); return ( );}EightteenChildThree.jsx //组件
import React, { useEffect, useContext } from 'react';import {Button} from 'antd'import {onChangeCount} from '../../pages/TwoTen/store/action';import { ExampleContext } from '../../pages/TwoTen/eighteen';const Example = () => { const exampleContext = useContext(ExampleContext); useEffect(() => { // 监听变化 console.log('变化执行啦') }, [exampleContext.exampleState.count]); return (
值为{exampleContext.exampleState.count}
exampleContext.dispatch(onChangeCount(exampleContext.exampleState.count))}>点击加 1 )}export default Example;
3.hooks实际上就是对常设React的API进行了封装，暴露比较方便使用的钩子;
4.钩子有：
5，使用即时方法
function FancyInput(props, ref) { const inputRef = useRef(); useImperativeMethods(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return ;}FancyInput = forwardRef(FancyInput);1.12插槽
slot就是将父组件的标签传给子组件，类似vue的v-slot
场景：一些组件只是共享部分dom逻辑，里面有部分逻辑是独立的
// 父组件文件import SlotChild from 'SlotChild'这是父组件的 slot}>// 子组件子组件直接获取 this.props.slot 就可获取到内容
