
reaact
文章平均质量分 75
xiaozhu_personal
github.com/xiaohesong/til
展开
-
create-react-app按需加载以及部署
闲来无事,就想着把前几天折腾的问题重新梳理一遍,加深印象. 上面一篇文章有提到升级eject的cra项目.为什么升级这个项目,就是想要折腾,就是想要使用到webpack2,还有一个好处是加深对create-react-app的理解.坏处不言而喻,折腾浪费生命浪费时间.按需加载AsyncComponent.jsimport React, { Component } from "react";ex原创 2017-09-27 09:54:12 · 3663 阅读 · 0 评论 -
react的useMemo
英文: Understanding Memoization in JavaScript to Improve Performance中文: 了解JavaScript中的Memoization以提高性能–react的应用我们渴望提高应用程序的性能,Memoization是JavaScript中的一种技术,通过缓存结果并在下一个操作中重新使用缓存来加速查找费时的操作。在这里,我们将看到memoi...原创 2018-11-22 19:40:03 · 10478 阅读 · 0 评论 -
react16.7 hooks api介绍
如果你之前对于Hooks没有了解,那么你可能需要看下概述部分。你或许也可以在一些常见的问题中找到有用的信息。基本的钩子useStateuseEffectuseContext添加的钩子useReduceruseCallbackuseMemouseRefuseImperativeMethodsuseMutationEffectuseLayoutEffect...原创 2018-11-01 11:17:44 · 386 阅读 · 0 评论 -
react 16.7 hooks write custom 编写自己的钩子
构建自己的Hook可以将组件逻辑提取到可重用的函数中。当我们学习使用`Effect Hook时,我们从聊天应用程序中看到了这个组件,该组件显示一条消息,指示朋友是在线还是离线:import { useState, useEffect } from 'react';function FriendStatus(props) { const [isOnline, setIsOnline] =...原创 2018-11-01 08:50:45 · 693 阅读 · 0 评论 -
react 16.7 hooks - effect 详解
Effect Hook可以使得你在函数组件中执行一些带有副作用的方法。import { useState, useEffect } from 'react';function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdat...原创 2018-10-31 13:01:27 · 7902 阅读 · 0 评论 -
react-redux connect源码解读
今天看了下react-redux的源码,主要来看下connect的方法首先找到connect的入口文件。在src/index.js下找到。对应connect文件夹下的connect.js文件。大致说下源码connect流程connect.js对外暴露是通过export default createConnect(), 我们来看createConnect方法。在这里,他是在对外暴露的时候...原创 2018-09-19 17:08:19 · 1082 阅读 · 0 评论 -
webpack4搭建react, 性能优化
前几天用webpack4配置了下react,这里主要说下碰到的一些问题,细节可以看源代码。hash缓存js和css都使用了chunkhash缓存,但是出现一个问题就是,无论修改css文件或者js文件,都会导致chunkhash改变,这显然不是我们需要的。然后用mini-css-extract-plugin将css提取出来之后使用contenthash,这样对内容进行hash命名。...原创 2018-08-31 15:25:46 · 1176 阅读 · 0 评论 -
React封装Fetch获取Api, 父组件与子组件的通讯
一个项目下来,和后台数据的交互实在是太多了,如果不封装一下就感觉怪怪的,而且也很不DRY.封装起来之后,会省事很多很多.封装fetch父子组件的通讯封装Fetch// MyFetch.jsconst API_URL = process.env.REACT_APP_DEV_API_URLvar methods = { get(path) { retu...原创 2017-10-16 13:22:22 · 2944 阅读 · 0 评论 -
React setState 的一些`坑`
setState今天发现有很多文章在说setState的坑,吐槽之声也不少.其实我就碰到过一个.setState不会立即改变数据// name is ""this.setState({ name: "name"})console.log(`name is ${this.state.name}`)这段代码没有按我的预料输出name.所以如果需要获取,就需...原创 2018-02-09 10:50:13 · 5479 阅读 · 0 评论 -
react使用阿里云对象存储,ali-oss, antd upload to ali-oss
最近写阿里云图片上传,碰到一些小问题,在此总结一下. 项目环境: create-react-app antd node6.1.0 看了阿里云oss对象存储sdk直接采用node 的安装方式.在使用的时候碰到了问题.yield client.put('file', file.url);=> TypeError: fs.createReadStream is not...原创 2017-12-21 13:13:29 · 10457 阅读 · 5 评论 -
webpack react antd遇到的问题
初始化项目文件加入antd问题总结相关链接最近这两天把redux切换到了redux-saga之后,就想学习学习webpack. 咋说呢,这个东西被大家说的神乎其神,所以在我的认知里还是蛮神秘的(新手的感觉而已,不喜勿喷). 今天上午把webpack看了下,有个大致的方向,就想配一个简单的,可以本地开发运行的react(custom_react)应用.初始化项目文件package.jso原创 2017-11-15 14:56:28 · 2625 阅读 · 0 评论 -
react-redux的简单使用
正式接触react应该有两个月了,项目开始也有一个月了, 开始新项目的时候就没有打算使用redux,因为感觉学习这个的成本挺高. 这两天,项目第一版已经出来了,昨天下午有时间就抓紧时间看看redux相关的东西,大致有个了解,然后今天就照葫芦画瓢,把一个模块给整理了下,换成了redux. 在这里记录下使用,以备后需.react-redux使用前得需要安装npm i --save react-re原创 2017-11-02 16:21:43 · 3802 阅读 · 0 评论 -
react的setState如何知道该做什么
原文: How Does setState Know What to Do?原译文: react的setState如何知道他要做什么译:可能看到标题的时候会想,怎么去做还不是看代码吗?react中的setState不就是负责更新状态码?于是就抱着好奇心看下去了。当你在组件中调用setState的时候,你认为让发生了什么?import React from 'react';import...原创 2018-12-09 17:17:14 · 448 阅读 · 0 评论