qq_21087199的博客

但是这次我们使用它是为了利用它的 BROWSER=none 来解决上面提到的第四个问题，不打开浏览器中的 tab 页。注：大概就是创建了一个 1024 * 680 的窗口，在开发环境下，将 http://localhost:3000。解决问题：解决 问题3 等3000端口执行完毕 再打开electron，为了不看到electron 白屏问题。npm start //可以看到在浏览器新打开一个监听 3000 端口的一个 tab。配置：在 package.json 中的 scripts 添加一个 dev。

高阶函数(Higher-order function),至少满足下列一个条件的函数上述代码中，该函数接受一个组件WrappedComponent作为参数，返回加工过的新组件EnhancedComponent。

代码层面工程层面框架机制层面通过这三个层面的优化结合，能够使基于react项目的性能更上一层楼。

中间件(Middleware)是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理，其本质上一个函数，对store.dispatch方法进行了改造，在发出Action和执行Reducer这两步之间，添加了其他功能。

通过redux将整个应用状态存储到store中，组件可以派发dispatch行为action给store其他组件通过订阅store中的状态state来更新自身的视图

在实际开发过程中，前端性能问题是一个必须考虑的问题，随着业务的复杂，遇到性能问题的概率也在增高除此之外，建议将页面进行更小的颗粒化，如果一个过大，当状态发生修改的时候，就会导致整个大组件的渲染，而对组件进行拆分后，粒度变小了，也能够减少子组件不必要的渲染。

使用React.createElement或JSX编写React组件，实际上所有的JSX代码最后都会转换成React.createElement(…),Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象。

在React中，JSX是其一大特性，可以让你在JS中通过使用XML的方式去直接声明界面的DOM结构上述中，ReactDOM.render()用于将你创建好的虚拟DOM节点插入到某个真实节点上，并渲染到页面上通过console.log(VDOM),则能够得到虚拟VDOM消息。

在render过程中，React将新调用的render函数返回的树与旧版本的树进行比较，这一步是决定如何更新DOM的必要步骤，然后进行diff比较，更新DOM树*

个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用如下例子通过点击按钮触发onclick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新我们会发现页面并不会有任何反应，但是state的状态是已经发生了改变。

Refs在计算机中称为弹性文件系统(英语：Resilient File System,简称ReFS)React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。

在react项目中去编写组件内JavaScript代码错误会导致React的内部状态被破坏，导致整个应用崩溃，这是不应该出现的现象作为一个框架，react也有自身对于错误的处理的解决方案。

由于React是单向数据流，主要思想是组件不会改变接收的数据，只会监听数据的变化，当数据发生变化时它们会使用接收到的新值，而不是去修改已有的值因此，可以看到通信过程中，数据的存储位置都是存放在上级位置中

将css文件作为一个模块引入，这个模块中的所有css,只作用于当前组件。不会影响当前组件的后代组件。将 css单独与在一个 css文件中,然后在组件中直接引入。

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式在React中，一个类、一个函数都可以视为一个组件

为了解决上面正确输出this问题，常见的绑定方式有：render方法中使用bindrender方法中使用尖头函数constructor中bind定义阶段使用箭头函数绑定

如果想要接触被控制，可以为input标签设置onChange事件,输入的时候触发事件函数，在函数内部实现state更新，从而懂啊组织input框的内容改变。受控组件特征：一次性取值（如提交时），提交时验证，即时现场验证，有条件的禁用提交按钮，强制输入格式，一个数据的多个输入，动态输入。如果选择非受控组件的话，控制能力较弱，表单数据就由DOM本身处理，但更加方便快捷，代码量少。受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。非受控组件，就是不受我们控制的组件。

函数组件语法更短、更简单，这使得它更容易开发、测试和理解。类组件会因为大量使用this让人困惑。

在React 中，类组件基于ES6，所以在constructor中必须使用super在调用super过程，无论是否传入props，React内部都会将props赋值给组件实例props属性中，如果调用了super(),那么this.props在super和构造函数结束之间仍然是undefined。

React 的核心思想就是组件化思想，而且页面会被切分成一些独立的、可复用的组件

Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件BrowserRouter是history模式，HashRouter模式吏用两者作为最顶层组件包裹其他组件。例如将path在Route匹配时写成/detail/:id,那么 /detail/abc、/detail/123都可以匹配到该Route。上述组件当接收到的路由参数name不等于tom的时候，将会自动重定向到首页。动态路由的概念指的是路由中的路径并不会固定。在跳转的路径中添加了一些query参数；● search传递参数。

redux 简介

Fragment可以为你的子元素分组而不需要在DOM上为它们添加额外的节点。

把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上。比如首页

【代码】react-router 源码之matchPath方法。

Switch可以提高路由匹配效率（单一匹配，谁在前面，先匹配谁）

该事件会在调用浏览器的前进，后退以及在执行history.forward,history.back 和history.go 的时候触发。

当组件上层最近的更新时，该HooK会触发重渲染，并使用最新传递给MyContext provider的context value 值。● useState的替代方案。它接收一个形如（state,action）=>newState的reducer，并返回当前的state以及与其配套的dispatch方法。● 在某些场景下，useReducer会比useState更适用，例如state逻辑较复杂且包含多个子值，或下一个state依赖于之前的state等。

● PureComponnet 和memo 都是通过对 props 值的浅比较来决定该组件是否需要更新的。● PureComponent和memo仅作为性能优化的方式存在。● 不要依赖它来阻止渲染，会产生BUG。

在一个典型的React 中，数据通过Props属性自下而上（由父及子）进行传递的，但这种做法对于某些类型的属性而言机器繁琐，（地区偏好，UI主题）这些属性是应用程序中许多组件都需要的。Context提供了一种在组件之间共享此值的方式，而不必显式的通过组件树逐层传递props。背景：在某些场景下，你想在整个组件树中传递数据，但却不想手动地在每一层传递属性，你可以直接在React中使用强大的contextAPI 解决上述问题。contextType只能用在类组件里。Consumer一般用在函数组件中。

【代码】React中的函数组件。

它与HTML中的for属性相似，但因为for是JavaScript的关键字，所以React使用htmlFor代替。上述代码中，label元素与input元素实现关联唯一的方式是把label的for属性的值设置为input的id属性的值。但是在React中，为了避免使用for关键字，需要使用htmlFor属性替代原先的for。注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

【代码】React DOM-DIFF最基本的算法。

● 在React渲染生命周期时，表单元素上的value 将会覆盖DOM节点中的值，在非受控组件中，你经常希望React赋予组件一个初始值，但是不去控制后续的更新，在这种情况下，你可以指定一个defaultValue属性，而不是value。可以使用ref去 存储DOM节点的引用 当ref属性用于HTML元素时，构造函数中使用React.createRef()创建的ref接收底层DOM元素作为其current属性。● ref转发允许某些组件接收ref,并将其向下传递，（转发它给其他组件）

如何判断它是同步的还是异步的，是不是批量处理 一个原则就是React能管控的地方，批量的，异步的（事件处理函数，生命周期函数）。不能管控的地方就是同步的 非批量（setInterval setTimeout）state的更新可能是异步的 出于性能考虑react可能会把多个setstate合并成同一个调用。在其他react 不能管控的地方，就是同步执行的（如定时器内）在事件处理函数中，setState的调用会批量执行。** 1 定义状态的第一种方式 在构造函数中**

【代码】React 类组件。

text/babel 将jsx - jsreact 工作步骤a) 创建虚拟DOMb) 渲染虚拟DOM到页面虚拟DOM1）本质是object类型对象2）虚拟DOM 比较轻量级 因为虚拟DOM是react 内部在用，无需真实DOM上那么多属性3）虚拟DOM最终会被react渲染到真实DOM上ReactDOM.render(VDOM,document.getElementById(‘test’))JSX 语法规则定义虚拟DOM时，不需要写引号2）标签中混入JS表达式时候要用{}样式类名.

**react 中的 super super(props)**1 constructor() ---- super（）的基本含义constructor () — 构造方法这是es6对类的默认方法，通过new 命令 生成对象实例时自动调用该方法，并且，该方法是类中必须有的，如果没有显示定义，则默认添加空的 constructor() 方法super() ----- 继承 在class方法中，继承是使用 extends 关键字来实现的。子类 必须 在 constructor( )调用 supe

a）虚拟DOM中key的作用 简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。 详细的书：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】随后React进行【新的虚拟DOM】与【旧虚拟DOM】的diff比较， （1）旧虚拟DOM中找到了与新虚拟DOM相同的key 若虚拟DOM中内容没变，直接使用之前的真实DOM 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM （2

*** 生命周期什么时候调用和自己写的顺序没有关系******//旧版本1）初始化阶段 由reactDom.render()触发 --初次渲染constructor()componentWillMount()render()``componentDidMount() ===》常用 一般在这个钩子里面做一些初始化 ：定时器开启 发送网络请求 订阅消息2) 更新阶段 ：由组件内部this.setState()或父组件render触发shouldComponentUpdate()componen