React
文章平均质量分 80
多云转晴ing
这个作者很懒,什么都没留下…
展开
-
webpack配置 react + ts 项目热替换功能
使用 webpack 配置项目坑是真多呀!搞了一下午才把坑填完,最后得出结论:遇到坑就到 npm 官网,看官方文档,使用搜索引擎看别人的填坑经历很多时候不一定能解决问题,遇到问题还是去 npm 或者 GitHub 上比较快啊。。这篇文章分享一下我遇到的两个坑~react + ts 项目配置热替换首先配置 webpack 和 tsconfig。React 使用热更替官方推荐下载 react-hot-loader 这个包,使用时需要先下载。webpack 配置如下:const { HotModuleRep原创 2020-08-22 16:55:14 · 535 阅读 · 0 评论 -
React Ref 使用总结
一般会使用 ref 获取 DOM 元素。例如:constructor(){ super(); // 创建 ref this.divRef = React.createRef();}componentDidMount(){ // DOM 元素可以通过 current 属性获得 console.log(this.divRef.current);}render(){ // 使用 ref return <div ref={this.divRef原创 2020-07-25 20:35:01 · 1282 阅读 · 0 评论 -
react-redux 中的 Hook 使用、context、JSX、性能优化以及与 Vue 的对比
redux下图是 Redux 的工作流程图。图中更新数据需要派发 Action,action 进入 dispatch,dispatch 中可能还会触发 action,比如使用 redux-thunk 中间件进行异步请求时,还会派发 action。然后 dispatch 函数会把 action 传递给 reducer 函数,reducer 用于状态的变更,状态变更后引起视图(View)更新。react-reduxreact-redux 是 React 应用和 redux 的桥接器。下面是他的使用方式原创 2020-07-25 16:40:35 · 1393 阅读 · 0 评论 -
React setState
setState 是同步更新还是异步更新?多次调用 setState 函数,React 会不会进行合并操作?首先是第一个问题,答:setState 有时是同步更新的,而有却是异步更新。一般情况下,setState 基本是异步更新,例如:// handleClick 是一个事件函数// 当点击按钮时,count 就会 +1handleClick () { this.setState({ count: this.state.count + 1 }); //.原创 2020-07-25 16:30:35 · 179 阅读 · 0 评论 -
React 使用技巧:useReducer、immer库和 Formik工具库
1. 使用 useReducer hookuseReducer 是 useState 的替代品,它可以更好的管理组件的状态。useReudcer 的格式:import { useReducer } from "react";let [state, dispatch] = useReducer(reducer, initialArg, init);各个变量的含义:state 拿到状态数据;dispatch 派发 action 的函数;reducer 我们自己编写的 reducer 函数;原创 2020-07-25 16:24:59 · 1747 阅读 · 0 评论 -
React 代码复用:HOC、render props 和 自定义 Hook
如何自己编写一个 react hook?react 允许我们自己编写 Hook。场景我们有几个组件,它们都要先进行 ajax 请求,获取到数据,然后把数据渲染到页面上。总体代码:class App extends Component{ state = { isLaoded: false, data: null } componentDidMount(){ // 发起网络请求 axios.get("/api/frui原创 2020-07-25 16:21:13 · 603 阅读 · 0 评论 -
react学习笔记
React 优化组件1. shouldComponentUpdate使用 shouldComponentUpdate 生命周期函数(简称 SCU)可以优化 React 组件。SCU 可以让我们自己控制组件是否进行渲染。它返回一个布尔值,true 代表重新渲染,false 代表不渲染。默认 SCU 返回 ture。即:父组件更新会连带着子组件也更新,有时候重新渲染子组件并没有必要。使用 SCU 可以优化组件渲染。shouldComponentUpdate(nextProps, nextState) {原创 2020-07-25 16:16:39 · 189 阅读 · 0 评论 -
实现一个简单的 Redux 功能库
首先简单说一下 Redux 在 React 项目中的用法。Redux 和 React 之间并没有什么关系,脱离了 React,Redux 也可以与其它的 js 库(甚至是原生 js)搭配使用,Redux 只是一个状态管理库,但它与 React 搭配使用时却很好用,使开发 React 应用更加简介。这里实现一个简单的计数器功能,当鼠标点击按钮时数字就会加一。使用 React-Hooks 写一个 App 组件用来实现该功能:import React,{ useState } from "react";fu原创 2020-07-25 11:20:17 · 174 阅读 · 0 评论 -
react-router 使用教程
react-router 使用react-router 可以创建单页应用。可以将组件映射到路由上,将对应的组件渲染到想要渲染的位置(根据路径的变化重新渲染组件)。React 路由的两种方式:HashRouter 利用 hash 实现路由的切换(a 标签中的锚 #);BrowserRouter 利用 H5 API 实现路由的切换;原始的浏览器 API 可以使用 window.location.hash 来获取哈希。使用 hashchange 来监听 url 哈希的变化:<a href=原创 2020-07-25 11:09:59 · 1270 阅读 · 0 评论