EmotionComputer

【代码】React常见知识点。

使用import()动态导入后返回一个promise，但是通过lazy包裹后可以得到一个直接渲染的组件。允许你显示一个退路方案（fallback）直到它的所有子组件完成加载。suspense：n. 焦虑、悬念。

React SSR

React顶层API

React key 三目运算符 逻辑与运算

代数效应

import React, { Component } from 'react';class Children extends Component { constructor(props) { super(props); console.log('son constructor'); } componentDidMount() { console.log('son mounted') } render() {

不用redux-thunk之前// store.jsimport { createStore } from 'redux';export const reducer = (state = { count: 0}, action) => { switch(action.type) { case 'CHANGE_DATA': { return { ...state, count

自定义hook所有的hook函数，以use开头，因此，自定义也需要use开头；相对复杂的hook需要用到useReducer；

1. useRefuseContext参考：https://blog.csdn.net/yexudengzhidao/article/details/118076960

参考官网链接：https://zh-hans.reactjs.org/docs/react-api.html#overviewReact.PureComponent用在class组件中用：React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。如果赋予 React

参考链接： Context

认识react-router：通过不同的地址，渲染不同的组件，简化单页面应用的编写。react-router相关四大组件：react-router：核心库react-router-dom： 给网页版用的react-router-native：react-native用的react-router-config： 静态配置辅助库...

注意： 在redux里会要求返回一个全新的state出来，原因是处于性能考虑，如果改变了某个属性，redux还需要去一个个对比是哪个属性发生了变化，而对于一个大型的数据结构来说，做深度检查是及其好性能的，所以redux选择了返回一个新的对象的方式。(创建一个对象的方式比做深度的对比性能要开销的小的多)。计算机中如果有一些事情不能理解，要么就是出于性能，要么就是出于安全性考虑的reducer是一个函数，在createStore的时候会自动执行一次。store的两个方法：store.getStat.

React 高阶组件redux 中间件React-router用JavaScript跳转路由：受控组件 VS 非受控组件portalcontext

一. useEffect作用：推迟代码执行渲染完成之后再执行，常用于 数据读取完成移除定时器、监听第二个参数来模拟生命周期。useEffect存在一种bail out(保释)机制：当你尝试设置相同的状态，不会渲染，也不会触发effect设置了相同state：“补救”——仅仅让你把函数执行完，不会真的渲染、也不会执行effect又设置了相同state——没有setStatestate设置重复的值——只会重复渲染一次 +1例如：useEffect——cl

一. 认识函数组件class组件——功能全、东西多；麻烦函数组件——功能弱、东西少；方便函数组件：1.状态——能变的、重新渲染class √fc × hook2.this——当前实例class √fc ×3.ref——引用class √fc × hook4.方法class √fc × hookhook：一套工具函数的集合——增强fc的功能函数组件专用的二.

React 中的函数式思想：https://zhuanlan.zhihu.com/p/24700702

1、this.props对象的属性与组件的属性是一一对应的，但是有一个例外就是this.props.children属性，它表示组件的所有子节点：var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, fun

React采坑记今天在用策略模式改写代码的时候，本来想简化一下代码，将渲染组件抽离出去，不料踩了一个小坑。虽然在函数里返回了内容，但是render()也是一个函数，所以也需要return内容原代码如下：<div id='wrapper'> { this.props.data.map((item, index) => { if (item.template === 'grid' && this.props.repo

一定要用dispatch包裹，否则不会触发方法return dispatch => {}的代码通过dispatch()将想要触发的方法包裹起来，dispatch检测到方法就会执行它export default handleGet (data) { return dispatch => { axios.get(list).then() ... }}export default handlePost (data) { return d

官方文档在 React router 中通常使用的组件有三种：路由组件（作为根组件）: BrowserRouter（history模式） 和 HashRouter（hash模式）路径匹配组件: Route 和 Switch导航组件: Link 和 NavLink关于路由组件，如果我们的应用有服务器响应web的请求，建议使用<BrowserRouter>组件; 如果使用静态...

react可以通过this.state.xx的方式直接获取state，但是当我们修改state的时候，往往有许多的坑。1. 不能直接修改state组件修改state，并不会重新触发render。例如： //错误this.state.title='attend';//正确this.setState({title:'attend'});2. state的更新是异步的调用setSta...

报错信息：Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a con...

map函数返回一个新的数组，在map的回调函数里，迭代每一项的时候也必须有返回值。forEach 没有返回值forEach情况import React, { Component } from "react"import ListItem from './ListItem'class TodoList extends Component { constructor(props)...

本章讲解React高级部分内容，包含PropTypes，生命周期函数，虚拟Dom，数据mock，动画实现等部分课程讲解。一.1.1 类型校验和默认值。1.2 什么是虚拟DOM生成真正的DOM需要调用很多底层的东西，很耗性能，而且真实DOM的对比也很耗性能，而虚拟DOM则是JavaScript模拟的DOM，所以对于生成和对比，性能会很大程度上提高。1.3 深入理解虚拟DOM1.4 ...

本章主要讲解React项目的开发环境搭建，工程代码结构及React中最基础的语法内容，同时对前端组件化思想进行介绍。一. 基础 import registerServiceWorker from './registerServiceWorker'; registerServiceWorker();PWA: progressive web application在HTTPS协议的服...

React16.4开发简书项目 从零基础入门到实战：https://coding.imooc.com/class/chapter/229.html#Anchor本章主要介绍学习react的重要性，课程的知识大纲，学习前提，讲授方式及预期收获。一. 课程导学1.1 涉及的知识点：1.2 收获：...

bindActionCreators的作用是将一个或多个action和dispatch组合起来生成mapDispatchToProps需要生成的内容。参考链接：https://www.jianshu.com/p/26356a9c5365

react-redux在react-redux框架中，给我提供了两个常用的API来配合Redux框架的使用，其实在我们的实际项目开发中，我们完全可以不用react-redux框架，但是如果使用此框架，就如虎添翼了。我们来简单聊聊这两个常用的APIconnect()Provider 组件React-Redux 将所有组件分成两大类：UI 组件（presentational compon...

上面一段代码在react中很常见，进行对象解构赋值后的代码为：return { count: 1, count: state.count+1}说明：由于这个返回的对象的key值相同，所以后面的把前面的替换掉了。由于返回的是一个{ }，所以返回的也是一个深拷贝后的对象。进一步扩展在React的store中的对象里，会存在很多个key、value，那么，当我们修改其中一个值并返...

一. this.props.children用法this.props.children表示组件的所有子节点。1.1import React from 'react';import Page from './components/Page'function App() { return ( <Page> <div>hh</div&gt...

一. Redux-thunk中间件的安装和配置Redux-thunk是Redux最常用的插件。那什么时候会用到这个插件呢？比如在Dispatch一个Action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware（中间件）。在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告，调用异步接口或者路由。 这个中间件可以使用是Redux-thunk来进行增强(当然你也可...

一. 工作中写Redux的小技巧-11.1 把Action Types 单度写入一个文件写Redux Action的时候，我们写了很多Action的派发，产生了很多Action Types，如果需要Action的地方我们就自己命名一个type,会出现两个基本问题：这些Types如果不统一管理，不利于大型项目的使用。因为Action里的type，一定要和reducer里的type一一对应在...

一. 创建Redux中的仓库store和reducer从Redux的工作流图中可以看出，Redux工作流程中有四个部分，最重要的就是store这个部分，因为它把所有的数据都放到了store中进行管理。在编写代码的时候，因为重要，所以要优先编写store。1.1 编写创建store仓库在使用Redux之前，需要先用npm install来进行安装，打开终端，并进入到项目目录，然后输入。（如果你...

一. Redux介绍Redux是一个用来管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。（Redux支持React，Angular、jQuery甚至纯JavaScript）从图中可以看出，如果不用Redux，我们要传递state是非常麻...

一. react-transition-groupReact有着极好的开发生态，开发需要的任何基本需求都可以找到官方或大神造的轮子，动画这种必不可少的东西当然也不例外，React生态中有很多第三方的动画组件，react-transition-group是react官方提供的动画过渡库，有着完善的API文档 ，可以满足日常动画开发需求。1.1 安装react-transition-group...

一. axios数据请求ajax是可以远程请求数据的，但是写起来太麻烦，我们可以用封装好的ajax请求库Axios来实现。1.1 安装Axios通过npm安装好Axios后，我们会发现在通过create-react-app 创建的项目结构中的package.json文件中，并没有找到我们安装好的依赖，原因是create-react-app又进行了封装，参考如下：react脚手架create-...

一. React 生命周期通过这张图你可以看到React声明周期的四个大阶段：Initialization:初始化阶段。Mounting: 挂载阶段。Updation: 更新阶段。Unmounting: 销毁阶段什么是生命周期函数如果非要用一句话把生命周期函数说明白，我觉的可以用这句话来说明：生命周期函数指在某一个时刻组件会自动调用执行的函数1.1 Initializa...

一. 调试工具的安装及使用React在浏览器端是有一个调试工具的，这就是React developer tools，它会比console.log()方便很多。1.1 React developer tools的三种状态React developer tools有三种颜色，三种颜色代表三种状态：灰色：说明页面不是由React编写的，不可使用该插件。黑色: 说明页面是用React编写的，并...