react
我是小怪兽-
Life isn't like in the movies.Life...is much harder.
展开
-
React的新特性之Hook
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook的含义:Hook 这个单词的意思是"钩子"。React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。你需要什么功能,就使用什么钩子。React 默认提供了一些常用钩子,你也可以封装自己的钩子。所有的钩子都是为函数引入外部功能,所以 React 约定,钩子一律使用u原创 2020-07-23 16:14:41 · 611 阅读 · 0 评论 -
redux基础整理
设计和使用原则store是唯一的:整个应用只保持一个Store,所有组件的数据源就是这个Store上的状态。保持状态只读,只有store能改变自己的内容:保持状态只读,就是说不能去直接修改状态(setState),要修改Store的状态,必须要通过派发一个action对象完成。数据改变只能通过纯函数完成:这里所说的纯函数,就是Reducer,基本概念1.StoreStore 就是保存数据的地方,相当于一个容器,整个项目只能有一个 Store。Redux 提供createStore这个函数,原创 2020-07-16 15:31:21 · 269 阅读 · 0 评论 -
useState()的回调实现
通过一个例子说明一下:功能:按钮点击使input组件显示,显示后实现input的光标聚焦。分析:input组件显示后才能调用input的focus()。1.定义class的实现方式:import React from 'react';import { Button, Input } from 'antd';class App extends React.Component { state = { inputVisible: false, }; save原创 2020-05-11 10:59:27 · 14090 阅读 · 0 评论 -
state的理解
针对state要明确三件事:1.不要直接修改state// 错的this.state.name = 'alice';应该使用setState()// 正确this.setState({ name: 'alice'});注意:构造函数是唯一可以给this.state赋值的地方 constructor(props) { super(props); this.s...原创 2020-04-23 09:08:49 · 1527 阅读 · 0 评论 -
antd design(4.x)中Upload应用------编辑缩略图
import React, { useState, useEffect } from 'react';import style from './index.less';import { EditOutlined, SettingTwoTone, PlusOutlined } from '@ant-design/icons';import defaultImg from './img/defa...原创 2020-04-22 09:15:29 · 1724 阅读 · 0 评论 -
react生命周期
组件的生命周期可分为三个状态:Mounting:已插入真实DOMUpdating:正在被重新渲染Unmounting:已移出真实DOM生命周期的方法有:componentWillMount 在渲染前调用,在客户端也在服务端。(组件即将挂载到页面上自动执行)componentDidMount : (组件被挂载之后自动执行)在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DO...原创 2020-03-05 16:17:31 · 719 阅读 · 0 评论 -
react深入之高阶组件
什么是高阶组件?如果一个函数,接受一个或多个组件作为参数并且返回一个组件,就可以称之为高阶组件。React中的高阶组件React中的高阶组件主要有两种形式:属性代理(Props Proxy)和反向继承(Inheritance Inversion)。1.属性代理分两种情况:情况一:无状态组件(Stateless Component)function MapComponent(Wrapp...原创 2020-03-05 15:58:26 · 228 阅读 · 1 评论 -
react中父子组件通信传值
父组件向子组件传值-----props父组件:import React, { Component } from 'react';import Child from './Child';class Parent extends Component { state = { parentStatus: 'parent' } showParent = ...原创 2020-02-26 18:10:34 · 304 阅读 · 0 评论 -
react中如何绑定this方法整理
方法一:ES6中可以在构造函数中,直接将当前组件(或者叫类)的实例与函数绑定示例代码:方法二:在方法编写结尾的时候绑定this示例代码:方法三:在方法调用的时候绑定this示例代码:方法四:ES6中的箭头函数(个人觉得:方便好用)示例代码:...原创 2020-02-26 17:40:16 · 386 阅读 · 0 评论