2019年12月_zhener09

原创 react触发render的三种方法

一、通过setState二、this.forceUpdate()三、通过状态管理，如mobx，redux等项目中我改变了一个对象的值，并没有setState，导致没有重新render，加上this.setState({});或者this.forceUpdate();问题就解决了。...

2019-12-25 11:08:18 6069

react hooks需要在react和react-dom 16.7以上，相比于组件的state结构过于臃肿，react hooks可以独立处理每个state,其写法让人一目了然，非常容易看见设置的state中的变量，和操作该变量的方法。下面是一个简单的demoimport React, { useState, useEffect } from ‘react’;export default ...

2019-12-17 10:03:46 134

原创 react中lazy and suspence用法

React.lazy只有在渲染的时候才加载代码。下面是一个demoindex.js:import React, { Suspense, lazy } from 'react';const SecondComponent = lazy(() => import('./secondComponent.js'))let content = '';let promise = '';con...

2019-12-15 22:24:07 188

原创 fetchMetadata: sill install loadAllDepsIntoIdealTree提示的一个解决方案

npm install时提示：fetchMetadata: sill install loadAllDepsIntoIdealTree解决方案：npm install -g cnpm --registry=https://registry.npm.taobao.org然后cnpm install

2019-12-15 20:55:30 14642

原创 componentDidUpdate vs componentWillReceiveProps

componentDidUpdate有两个参数prevProps和prevState，不管是父组件props的修改还是state状态的更改都会触发该方法，而componentWillReceiveProps只有在父组件重新render props改变的时候才会触发。下面的代码是只有上一次的changeForm不包含1且本次props.changeForm包含1才会执行componnetDidUpd...

2019-12-15 20:32:55 897

原创记录react中接口一直调用的原因

项目中遇到一个问题，render里调用了showAccountsService方法，导致getDeligentCustomerAbility里面的接口和getStatus定义的接口一直执行，导致卡死。class Feature extends React.PureComponent { getDeligentCustomerStatus = async () => { const...

2019-12-14 17:26:34 2106

原创 js枚举enum用法

const.ts:export enum ApplicationTpe { SelfApplication, Accounts, ThirdApplication}在使用时：ApplicationTpe里面定义的变量的值默认是从0开始，依次累加import {ApplicationTpe} from '@utils/consts';const {SelfAppl...

2019-12-14 16:54:36 16060

原创 Promise与Async/Await使用总结

一、Promise1.Promise语法Promise是一个对象，有两个参数resolve,reject通过promise我们可以获得有关异步操作的消息，resolve会将异步操作的结果作为参数传递出去，而reject则会将异步失败的原因作为参数传递出去。其then方法可以接受resolve,reject两个回调函数作为参数。catch是捕获异常的。finally是最后执行的函数。cons...

2019-12-14 16:13:54 316

原创记录clipboard踩过的坑

点击复制链接的时候，可以将前面的链接复制下来，当复制成功时会打印‘内容已经复制到剪切板啦’。代码为：<input value="https://www.baidu.com/" type="text" name="urlLink" id="copyContent"/><button id="copyBtn" data-clipbo...

2019-12-14 14:05:47 715

原创 react中context用法

react中经常会用到组件之间相互传值，父组件给子组件传值通过props,子组件给父组件传值则需要在父组件中定义一个方法，有时react中组件之间的关系非常复杂，并非父子关系，有时他们还交叉着许多其他组件，那么这时候组件之间怎么传值呢？context解决了这样的难题。下面是一个测试例子：其核心代码是 React.createContext，顾名思义是创建一个context,Provider，顾名思...

2019-12-08 23:05:38 152

原创 react中forward ref的使用

所谓Ref forwading，则是一种凭借组件向子组件自动传递ref 的一门技术。下面是一个测试demoimport React, { createRef, forwardRef } from 'react';import './index.less';const InputTest = forwardRef((props, ref) => ( <input type=...

2019-12-08 22:22:20 1320

sinat_41747081的博客