react生命周期

1.shouldComponentUpdate 的作用?

shouldComponentUpdate 容许咱们手动地判断是否要进行组件更新，依据组件的利用场景设置函数的正当返回值可能帮咱们防止不必要的更新

2.React 中 keys 的作用是什么？

Keys是 React 是for循环外面先比拟key值如果雷同，而后去比拟外面的内容，如果雷同就不必更新dom，只用更新最新数据变动，如果没有key值，
如果key一样，若组件属性有所变动，则react只更新组件对应的属性；没有变动则不更新，如果key不一样，则react先销毁该组件，而后从新创立该组件

3.何为受控组件(controlled component)?

比方<input/>, <select> 和 <textarea>
如 onChange 会更新 state，从新渲染组件，
而非受控组件是比方失去焦点或者提交按钮，须要的时候再去取就是非受控组件

4.setState 为什么是异步的
  1. 保障外部的一致性 （因为props是要等到父组件渲染过后能力拿到，也就是不能同步更新，state出于统一性设成异步更新）
  2. 性能优化 （举例说你正在一个聊天窗口输出，如果来了一条新音讯又要render,那就会阻塞你的以后操作，导致提早什么的）
  3. 反对state在幕后渲染（异步能够使state在幕后更新，而不影响你以后旧的页面的交互，晋升用户体验）
5.react性能优化计划
  • 重写shouldComponentUpdate来防止不必要的 dom 操作
  • 应用 production 版本的react.js
  • 应用key来帮忙React辨认列表中所有子组件的最小变动
6.类组件和函数组件之间有什么区别？

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件应用的时候要实例化，而函数组件间接执行函数取返回后果即可。为了进步性能，尽量应用函数组件。
区别函数组件类组件是否有this没有有是否有生命周期没有有是否有状态state没有

7.state 和 props有什么区别
  • props 是一个从内部传进组件的参数，次要作为就是从父组件向子组件传递数据，它具备可读性和不变性，只能通过内部组件被动传入新的 props 来从新渲染子组件，否则子组件的 props 以及展示模式不会扭转。
  • state 的次要作用是用于组件保留、管制以及批改本人的状态，它只能在 constructor 中初始化，它算是组件的公有属性，不可通过内部拜访和批改，只能通过组件外部的 this.setState 来批改，批改 state 属性会导致组件的从新渲染。
8.如何创立refs？
class MyComponent extends React.Component {  constructor(props) {    super(props);    this.myRef = React.createRef();  }  render() {    return <div ref={this.myRef} />;  }}
ref={(input) => this.input = input}
9.constructor中super与props参数一起应用的目标是什么？

在调用办法之前，子类构造函数无奈应用 this 援用 super() 。

在ES6中，在子类的 constructor 中必须先调用 super 能力援用 this 。

在 constructor 中能够应用 this.props

10.调用 setState 之后产生了什么？

react-router的原理

向路由传递参数

browerRouter和hashRouter区别

React-Router怎么获取历史对象？
React-Router怎么获取URL的参数？
在history模式中push和replace有什么区别？

push能够返回到上一级，replace返回不到上一级，比方登陆页面

React-Router怎么设置重定向？

<Redirect to="/home"/>

React-Router 4中<Router>组件有几种类型？
React-Router 3和React-Router 4有什么变动？增加了什么好的个性？
React-Router的实现原理是什么？

顶层Router订阅history，history变动时，Router调用setState将location向下传递，并设置到RouterContext。Route组件匹配context中的location决定是否显示。Switch抉择最先匹配到的显示，利用props children。Link组件阻止a标签默认事件，并调用history.push。NavLink通过匹配context中的location决定是否为active状态。Redirect组件匹配context里的location决定是否调用history.push(to)，Switch组件会匹配location和from决定是否发动Redirect。

React-Router 4的switch有什么用？

最新匹配那个路由，不持续往下匹配

React-Router 4怎么在路由变动时从新渲染同一个组件？
React-Router的<Link>标签和<a>标签有什么区别？
React的路由和一般路由有什么区别？
请你说说React的路由的优缺点？
请你说说React的路由是什么？

何为高阶组件（HOC）？

  1. 代码复用，逻辑抽象化
  2. 渲染劫持
  3. 抽象化和操作状态（state）
  4. 操作属性（props）减少或者批改props
  5. const withLoading = Loading => WapperedComponent => {
  6. ` const WithLoading = props => {
  7. return props.data.length === 0 ? (
  8. <Loading />
  9. ) : (
  10. <WapperedComponent {...props} />
  11. );
  12. };
  13. return WithLoading;
  14. };`
    const Loading = () => <p>loading</p>;
    withLoading(Loading)(Component)

Context

React.createContext()

这个办法用来创立context对象，并蕴含Provider、Consumer两个组件 <Provider />、<Consumer />const {Provider, Consumer} = React.createContext();

Provider

数据的生产者，通过value属性接管存储的公共状态，来传递给子组件或后辈组件eg:<Provider value={/* some value */}>

Consumer

数据的消费者，通过订阅Provider传入的context的值，来实时更新以后组件的状态 eg: <Consumer>  {value => /* render something based on the context value */}</Consumer>

https://segmentfault.com/a/11...

hook

useState useEffect useRef

import { useSelector, useDispatch } from "react-redux";

redux

首先是dispatch一个action。

而后reducer会收到这个action, 依据这个action对状态进行批改。

状态批改当前会被解决容器捕捉到。

从而对相干的界面进行更新。

[应用webpack打包React我的项目，怎么减小生成的js大小？]

应用commonsChunkPlugin抽出公共代码