React
紫苏薄荷
生活就像一片海洋,水深得很。
展开
-
从 history 开始学习 React Router
historyhistory 是 Facebook 的JavaScript库,用于管理会话历史,React Router是基于history实现的。history 包含了 window.history ( HTML5 History API )history 有以下方法:block在地址栏改变之前,告知地址栏改变即将发生createHref返回当前路径名listener监听地址栏改变,用于地址改变前截取以下方法用于跳转:goBack返回上一条历史记录goForward原创 2020-06-09 16:17:50 · 202 阅读 · 0 评论 -
React 代码分割 & loading 页面的实现
React.lazy 和 Suspenseconst Component = React.lazy(() => import('./Component));React.lazy函数可以实现动态引入组件,它会在组件首次渲染时,自动导入Component。渲染lazy组件需要借助Suspense组件,它有一个fallback属性,可以传入在加载过程中想要展示的元素。Suspence可以放置在懒加载组件之上的任何位置。在路由进行代码分割原先页面加载时,默认会把路由上的所有组件一起加载过来(比如原创 2020-06-02 15:24:43 · 404 阅读 · 0 评论 -
用React.memo API解决函数组件多余渲染的问题
引入学习Hook之后,我了解到useEffect()一般是在组件渲染之后执行的(当然也可以传入依赖列表来跳过Effect),所以能够起到class组件生命周期方法:componentDidMount()、componentDidUpdate() 和 componentWillUnmount() 的作用,但我没有找到shouldComponentUpdate()的替代方案。经过官网API文档,我得知React.memo API能够起到类似的效果。React.memoReact.memo 是高阶组原创 2020-06-02 15:23:14 · 424 阅读 · 0 评论 -
React - 组合特性解读
React 组合特性在React中实现代码复用,常常使用组合模式,而不是继承模式。下面通过简单的例子来说明:现在有个写好了的通用边框组件,对话框中要用到它。但是对于不同的对话框,边框展示的内容也是不相同的,比如在Welcome对话框中,我们希望边框显示一些welcome有关的信息(比如欢迎标题等),要怎么处理呢?这里有很明显的包含关系,即对话框包含了边框组件,因此可以使用这样的组合方式://子:可复用的边框组件function FancyBorder(props) { return (原创 2020-06-02 15:21:34 · 195 阅读 · 0 评论 -
Redux - Reducer 纯函数和拆分
1. Reducer的纯函数原则和时间旅行Reducer一定要是纯函数,所谓纯函数,即就是只要函数的调用参数相同,就永远返回相同的结果。一个纯函数,它返回的结果往往是可以根据参数精确预测的。要实现纯函数,只要做到:不修改入参不执行有副作用的操作(修改函数之外的其他变量、API调用等)不调用其他非纯函数(Date.now())保证纯函数的原则,则每当我们dispatch一个相同的action,且初状态相同,则总是能得到一个相同的结果(状态变化),因此可以实现redux的时间旅行功能。2原创 2020-06-02 15:20:26 · 375 阅读 · 0 评论 -
React Hook 学习笔记
useEffectuseEffect(effect, [])useEffect()在渲染完成后执行,而且是每次渲染完后都执行effect中能够返回一个函数,该函数将在组件卸载前执行,以实现与componentWillUnmount()类似的功能(一般用于清除副作用)这个被返回的清除函数,事实上也是每次渲染后都执行,这会减少bug!https://zh-hans.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-ea原创 2020-06-02 15:19:52 · 198 阅读 · 0 评论 -
理解React单向数据流:实现状态提升
React状态提升由于React的单向数据流,组件无法修改自己的props,只能通过父组件传递的方法来修改父组件的state,向下引起props的变化。在 React 应用中,任何可变数据应当只有一个相对应的唯一“数据源”。通常,state 都是首先添加到需要渲染数据的组件中去。然后,如果其他组件也需要这个 state,那么你可以将它提升至这些组件的最近的共同父组件中。应当依靠自上而下的数据流,而不是尝试在不同组件间同步 state。官方demo的实现(与官方代码有差异):import Rea原创 2020-06-02 15:17:14 · 915 阅读 · 0 评论 -
React 入门文档的梳理
React 工具链根据官网了解到,React既有以下工具链:Node.js构建服务端渲染网站,可使用Next.js面向内容的静态网站,可使用Gatsby以及更灵活的Neutrino、Parcel、Razzle目前对React还不够熟练,因此现以简单了解为主。React 元素渲染元素是React应用的最小单位。React元素一经创建就是不可变的(immutable),更新的唯一方法是重新创建元素并渲染;尽管如此,React DOM会将当前元素与之前的进行比较,只做必要的更新。(重要且深刻原创 2020-06-02 15:16:03 · 172 阅读 · 0 评论 -
React-redux 的学习记录
1. 添加 React-redux 到项目react-redux并不是内置在redux里的,因此要单独添加:cd到项目目录,执行yarn add react-redux2. React-redux 的组件拆分规范react-redux把组件分成了两个大类:UI组件 和 容器组件UI组件UI组件的特征有:只负责UI渲染,不带有业务逻辑是典型的无状态组件,没有state,所有数据由props提供不使用Redux的API容器组件容器组件的特征有:负责管理数据和业务逻辑,不负责UI渲原创 2020-06-02 15:13:26 · 114 阅读 · 0 评论 -
Redux-thunk 中间件的启用方法
Redux thunkthunk 是一个 Redux 的中间件(Middleware)。1. 添加和配置thunk到项目:https://github.com/reduxjs/redux-thunk2. 应用thunk//store & thunkimport { createStore, applyMiddleware, compose } from 'redux';import reducer from './reducer';import thunk from 'redux原创 2020-06-02 15:10:32 · 127 阅读 · 0 评论 -
Redux 入门 - 工作流程和使用原则
1. Redux 如何工作组件通过store.dispatch()方法发送action对象给store,store自动将prevState和action发送给reducers,reducers将newState返回给store,由此store中存放的state得到了更新,再由组件的subscribe()方法监听到store的变化,重新调用store.getState()方法,组件中的state也就随之更新。Action对象的编写:actiontype可以拆分在一个独立的js(constants.原创 2020-06-02 15:07:27 · 178 阅读 · 0 评论