react简介

react生命周期

截屏2021-01-24 下午9.16.49.png

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` 为什么是异步的

保证内部的一致性（因为props是要等到父组件渲染过后才能拿到，也就是不能同步更新，state出于统一性设成异步更新）
性能优化（举例说你正在一个聊天窗口输入，如果来了一条新消息又要render,那就会阻塞你的当前操作，导致延迟什么的）
支持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怎么设置重定向？

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）？

代码复用，逻辑抽象化
渲染劫持
抽象化和操作状态（state）
操作属性（props）增加或者修改props
const withLoading = Loading => WapperedComponent => {
` const WithLoading = props => {
return props.data.length === 0 ? (
<Loading />
) : (
<WapperedComponent {...props} />
);
};
return WithLoading;
};`
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抽出公共代码