react
江醉鱼
神游全世界,苟活人世间
展开
-
React16新特性学习
1、FragmentFragment 组件其作用是可以将一些子元素添加到 DOM tree 上且不需要为这些元素提供额外的父节点,相当于 render 返回数组元素。2、生命周期函数的更新React 引入了 getDerivedStateFromProps 、 getSnapshotBeforeUpdate 及 componentDidCatch 等三个全新的生命周期函数。将 compon...原创 2019-11-21 19:43:14 · 183 阅读 · 0 评论 -
react之hooks
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用。useStateimport React, { useState } from 'react';function Ex...原创 2019-10-30 22:37:10 · 169 阅读 · 0 评论 -
React严格模式
严格模式StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。import React from 'react';function ExampleApplication() { return ( <div> <Header /&...原创 2019-10-29 23:29:06 · 1651 阅读 · 0 评论 -
React合成事件和jsDOM事件的区别
js事件:①小写命名<button onclick="activateLasers()">激活按钮</button>②阻止默认事件点我React合成事件事件驼峰命名<button onClick={activateLasers}>激活按钮</button>②阻止默认事件( e.preventDefault()????function ...原创 2019-10-24 23:42:27 · 919 阅读 · 0 评论 -
react知识点梳理
1、虚拟DOM原理2、diff算法原理3、创建组件的方法4、路由5、声明周期函数6、性能优化7、中间件thunk和saga8、高阶组件9、setstate函数10、reducer和combineReducer11、action12、store13、容器组件和UI组件(mapStateToProps和mapDispatchToProps)14、react合成事件和js原生事...原创 2019-10-24 23:19:34 · 152 阅读 · 0 评论 -
react路由
React Router 是建立在 history 之上的。 简而言之,一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。常用的 history 有三种形式, 但是你也可以使用 React Router 实现自定义的 history。browserHistoryhas...原创 2019-10-24 00:11:47 · 124 阅读 · 0 评论 -
redux精读
Redux(1)Web应用是一个状态机,视图与状态是一 一对应的。(2)所有的状态都保存在一个对象里面。StoreStore是一个容器,用来保存数据。整个应用只能有一个Store。Redux提供createStore这个函数来生成Store。import { createStore } from 'redux';const store = createStore(fn);上面的代...原创 2019-10-18 09:10:33 · 172 阅读 · 0 评论 -
redux中间件saga和thunk的区别
redux-thunk分析redux-thunk的源码node_modules/redux-thunk/src/index.jsfunction createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => next => action => { if (typeof action =...原创 2019-10-16 16:31:37 · 2712 阅读 · 0 评论 -
react基础知识
react虚拟DOMreact会在内存中维护一个虚拟DOM树,并对这个DOM树进行读写,当数据变化时,react会自动更新虚拟DOM,然后将新的虚拟DOM和 旧的虚拟DOM进行对比,找到变更的部分,得到一个diff,将diff放在队列里,然后批量更新到真实DOM中去。react生命周期函数初始化:getDefaultProps、getInitalState、componentWillMoun...原创 2019-10-15 16:41:57 · 209 阅读 · 0 评论 -
Redux之combineReducers和reducers的关系及用法
browser.min.js和babel-core模块一样,是将ES6以上的语法转为ES5在浏览器上运行。第一种是用script标签引入进来,第二种使用npm install去安装就可以了。react的jsx语法在script标签上需要加上 type=“text/babel”。...原创 2019-06-18 16:39:30 · 251 阅读 · 0 评论 -
react懒加载
新建lazy文件夹和lazy/index.js文件,内容如下import React from 'react';const asyncComponent = (importComponent) => { return class extends React.Component { constructor() { super(); this.stat...原创 2019-10-08 08:37:32 · 212 阅读 · 0 评论