React 知识点

1、调用setState之后，发生了什么？

​ 1）、合并state

​ 把传入setState（）里的参数对象和当前的state进行（属性）合并。 触发调和过程（Reconciliation）

​ 2）、 重新渲染组件

​ 2.1） React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；

​ 2.2） React 会自动计算出新的树与老树的节点差异（用diff算法），然后根据差异对界面进行最小化重渲染

2、state和props的区别

​ 1）、state是组件的状态，也叫组件内部的数据

​ 2）、props是组件的属性，也可以认为是外部给组件传入的数据

3、在构造函数里调用super函数并把props作为参数传入的作用是啥？

​ 1）、在构造函数里调用super的目的是：保证子类（组件里）有this；

​ 在ES6中，super()函数就是父类的构造函数。所以，在react里定义类组件时，调用super就是在调用React.Component的构造函数。

​ 2）、调用super函数时，把props传入的目的是，保证this有属性props；即：在子类（组件）里能够使用this.props

4、为什么建议传递给setState函数的参数是回调函数而不是对象？

因为，this.setState()函数内部是异步执行的。

1）、如果给setState()的参数写成对象的话，你会误以为它是同步的。进而，如果想使用新的值，就会下意识调用setState完毕后，直接使用新的msg的值，

如下代码，你是否会下意识（“直观”）地觉得是异步呢，哈哈

this.setState({
     msg:"hello"
});
console.log(this.state.msg);// 亲，这个值不是hello

2）、如果写成回调函数的话，你就不会有以上的误解。

//改变状态前后都想做一些事情：
this.setState((prevState)=>{
    // prevState:是旧值
    console.log("prevState",prevState)
    return {
        age:15
    }
},()=>{
    // this.state:就是新值。
    console.log(this.state.age);
});

5、React中的setState是同步执行还是异步执行？如果是异步的？怎么拿到执行后的state？

setState是异步的。

如果要拿到修改后的状态，需要使用回调函数的方式，如下：

//改变状态后想做一些事情：
this.setState({
  属性名:属性值
}, () => {
  //一般是用于在setState之后做一些操作
  //this.state == 修改之后的state
})

为什么不能直接用以下办法更新state

​ this.state.msg = “hello”;

​ 因为，这样不会引起组件的重新渲染，所以，数据修改后没法 呈现在页面上。

​ 而调用setState()函数，会引起组件的重新渲染，这样更新的数据就会呈现在页面上

7、React有哪些特征？

它使用虚拟 DOM 而不是真实的 DOM

它可以使用服务器端渲染

它遵循单向数据流或数据绑定

8、什么是JSX？

JSX 是 JavaScript XML 的简写。这是 React 使用的一种文件类型，它利用了 JavaScript 的表现力以及类似 HTML 的模板语法。使得 HTML 文件非常容易理解。此文件使应用程序变得更强大并提高其性能。

9、为什么浏览器不能读取 JSX？

浏览器只能读取 JavaScript 对象，但不能读取常规 JavaScript 对象中的 JSX。因此，为了让浏览器能够读取 JSX，首先，我们需要使用 Babel 等 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后将其传递给浏览器。

10、简述 flux 思想

Flux 的最大特点，就是数据的"单向流动"。 用户访问 View View 发出用户的 Action Dispatcher 收到 Action，要求 Store 进行相应的更新 Store 更新后，发出一个"change"事件 View 收到"change"事件后，更新页面

11、React 项目用过什么脚手架（本题是开放性题目） creat-react-app Yeoman 等

12、了解 redux 么，说一下 redux 

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据，flux 也是用来进行数据操作的，有四个组成部分 action，dispatch，view，store，工作流程是 view 发出一个 action，派发器接收 action，让 store 进行数据更新，更新完成以后 store 发出 change，view 接受 change 更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store，在 Flux 中 dispatcher 被用来传递数据到注册的回调事件，但是在 redux 中只能定义一个可更新状态的 store，redux 把 store 和 Dispatcher 合并,结构更加简单清晰 新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们 redux 有什么缺点 一个组件所需要的数据，必须由父组件传过来，而不能像 flux 中直接从 store 取。 当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新 render，可能会有效率影响，或者需要写复杂的 shouldComponentUpdate 进行判断。

简而言之，用户发出Action，Reducer更新state，View重绘

13、react性能优化方案

重写shouldComponentUpdate来避免不必要的dom操作

使用production版本的react.js

使用key来帮助React识别列表中所有子组件的最小变化

14、React 组件生命周期有哪些不同阶段？

在组件生命周期中有四个不同的阶段：

Initialization：在这个阶段，组件准备设置初始化状态和默认属性。

Mounting：react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括componentWillMount和componentDidMount生命周期方法。

Updating：在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法。

Unmounting：在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含 `componentWillUnmount `生命周期方法。

除以上四个常用生命周期外，还有一个错误处理的阶段：

Error Handling：在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含了 `componentDidCatch` 生命周期方法。

15、React 中的高阶组件运用了什么设计模式？

使用了装饰模式，高阶组件的运用：

function withWindowWidth(BaseComponent) {
    class DerivedClass extends React.Component {
        state = {
            windowWidth: window.innerWidth,
        }
        onResize = () = >{
            this.setState({
                windowWidth: window.innerWidth,
            })
        }
        componentDidMount() {
            window.addEventListener('resize', this.onResize)
        }
        componentWillUnmount() {
            window.removeEventListener('resize', this.onResize);
        }
        render() {
            return < BaseComponent {...this.props
            } {...this.state
        }
            /> 
     } 
  } 
  return DerivedClass; 
} 
const MyComponent = (props) => { 
    return Window width is: {props.windowWidth} 
}; 
export default withWindowWidth(MyComponent);

复制代码 装饰模式的特点是不需要改变 被装饰对象 本身，而只是在外面套一个外壳接口。JavaScript 目前已经有了原生装饰器的提案，其用法如下：

@testable class MyTestableClass { }

16、React的严格模式如何使用，有什么用处？

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。 可以为应用程序的任何部分启用严格模式。例如：

import React from 'react';
function ExampleApplication() {
    return ( < React.StrictMode > );
}

 在上述的示例中，不会对Header 和Footer 组件运行严格模式检查。但是，ComponentOne 和ComponentTwo 以及它们的所有后代元素都将进行检查。

StrictMode 目前有助于：

识别不安全的生命周期

关于使用过时字符串 ref API 的警告

关于使用废弃的 findDOMNode 方法的警告

检测意外的副作用

检测过时的 context API