![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
react
撸码的小哥
为了曾经吹过的牛逼而努力撸码
展开
-
react-redux实现原理
import React, {Component} from "react";const ValueContext = React.createContext();// connectexport const connect = ( mapStateToProps = state => state, mapDispatchToProps) => WrappedComponent => { return class extends Component { .原创 2020-10-04 19:16:22 · 125 阅读 · 0 评论 -
redux扩展,自定义redux以及中间件实现思路
存储状态state 获取状态getState 更新状态dispatch变更订阅subscribe自定义redux中间件:kRedux.jsexport function createStore(reducer, enhancer){ if (enhancer) { return enhancer(createStore)(reducer) } // 保存状态 let currentState = undefined; ..原创 2020-10-04 14:46:15 · 158 阅读 · 0 评论 -
react组件跨层级通信context
React中使⽤Context实现祖代组件向后代组件跨层级传值。 Vue中的provide & inject来源于ContextContext API React.createContext 创建⼀个 Context 对象。当 React 渲染⼀个订阅了这个Context 对象的组件,这个组件会从组件树中离⾃身最近的那个匹配Provider 中读取到当前的 context 值。Context.Provider Provider 接收⼀个 valu...原创 2020-10-04 14:02:46 · 308 阅读 · 0 评论 -
react之弹窗组件的设计和实现
设计思路 弹窗类组件的要求弹窗内容在A处声明,却在B处展示。react中相 当于弹窗内容看起来被render到⼀个组件⾥⾯去,实际改变的是⽹ ⻚上另⼀处的DOM结构,这个显然不符合正常逻辑。但是通过使⽤ 框架提供的特定API创建组件实例并指定挂载⽬标仍可完成任务。// 常⻅⽤法如下:Dialog在当前组件声明,但是却在body中另⼀个div中显示import React, {Component} from "react";import Dialog from "../conpon..原创 2020-10-03 18:49:28 · 2222 阅读 · 0 评论 -
react之表单组件的封装设计与实现
举例:antd组件antd表单使⽤⽤state实现⽤户名密码登录//FormPage.jsimport React, {Component} from "react";import {Form, Input, Button, Icon} from "antd";export default class FormPage extends Component { constructor(props) { super(props); this.state =...原创 2020-10-03 16:32:53 · 811 阅读 · 0 评论 -
react高阶组件HOC
定义:⾼阶组件是参数为组件,返回值为新组件的函数。基本使用:// HocPage.jsimport React, {Component} from "react";// hoc: 是⼀个函数,接收⼀个组件,返回另外⼀个组件//这⾥⼤写开头的Cmp是指function或者class组件const foo = Cmp => props => { return ( <div className="border"> <Cmp {...p..原创 2020-10-03 15:37:46 · 115 阅读 · 0 评论 -
react-redux如何使用?
安装npm install react-redux --save使⽤react-reduxreact-redux提供了两个api 1. Provider 为后代组件提供store 2. connect 为组件提供数据和变更⽅法 全局提供store,index.jsimport React from 'react'import ReactDom from 'react-dom'import App from './App'impor...原创 2020-10-03 14:49:23 · 65 阅读 · 0 评论 -
redux如何使⽤?
在下⾯的场景中,引⼊ Redux 是⽐较明智的: 1、你有着相当⼤量的、随时间变化的数据; 2、你的 state 需要有⼀个单⼀可靠数据来源; 3、你觉得把所有 state 放在最顶层组件中已经⽆法满⾜需要了。 4、某个组件的状态需要共享。安装reduxnpm install redux --save⽤⼀个累加器举例 1. 需要⼀个store来存储数据 2. store⾥的reducer初始化state并定义state修改规则 3. 通过dispa...原创 2020-10-03 14:42:16 · 53 阅读 · 0 评论 -
create-react-app脚手架搭建react项目
第一步:下载安装全局的脚手架工具npx i -g create-react-app或者yarn add -g create-react-app第二步:脚手架创建项目create-react-app my-app第三步:切换至项目根目录cd my-app第四步:运行项目npm start或者yarn start其他打包:npm run build或者yarn build...原创 2020-09-25 16:18:45 · 54 阅读 · 0 评论