React面试题（二）

9.[state与prop的区别是什么？]

    1.prop是组件对外的接口，是用来接受数据。state是组件内部记录状态，用来改变组件。

    2.prop的赋值时在组建外进行的，state的改变是在组件的内部。

    3.组件是不应该改变的prop的值，而state就是让组件进行改变的。

10.[react的生命周期是什么？]

    生命周期是一个组件从生到死的一个过程，react为生命周期提供了一些关键节点，即会被触发的事件，来让组件方便处理各种场景

11.[有哪些生命周期函数？作用是什么？]

    挂载阶段

        1.componentWillMount()-组件将要加载，但还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行

        2.componentDidMount()-组件加载完成

    运行阶段

        1.componentWillUpdate()-组件将要更新

        2.componentDidUpdate()-组件更新完成

    卸载阶段

        1.componentWillUnmount()-组件将要被销毁

    还有2个比较特殊的

        1.componentWillReceiveProps()-接收父组件传递过来的参数props时触发

        2.shouldComponentUpdate()-判断组件是否需要更新, 它需要一个返回值，默认为true，若为false则组件不更新

12.[react中ref的作用是什么？]

    ref是React提供的用来操纵React组件实例或者DOM元素的接口；回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，都是获取其引用。

13.[react中状态提升是什么？什么时候使用？]

    React中的状态提升概括来说,就是多个组件需要反映相同的变化数据，提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件。

    React Hooks是React 16.8.0版本推出的新特性 主要的作用就是让无状态组件 可以使用状态（在react开发中状态的管理是必不可少的 以前为了进行状态管理需要使用类组件或者redux等来管理

    useState() 就是React提供最基础、最常用的Hook，主要用来定义和管理本地状态。

    useState返回的是一个数组(长度为2)，数组的第一个对象表示当前状态的值，第二个对象表示用于更改状态的函数，类似于类组件的setState。

14.[什么是受控组件，什么是非受控组件？]

    1.受控组件：通过React的state作为数据唯一来源，通过变更函数调用setState方法更新数据的表单输入元素。它们的初始值，是this.state的初始值。

        1.input的type="text/number/其他输入格式"的元素，value属性，显示和控制数据; 取值e.target.value;

        2.select元素也通过value控制数据，但是它的value可以通过设置multiple，传入一个数组；取值e.target.value;

        3.textarea元素通过value属性显示和控制数据；取值e.target.value;

        4.type="checkbox"或者"radio", 通过checked属性，显示和控制数据；取值e.target.checked;

        5.都通过onChange事件属性的处理函数及setState，来更新表单的值；

        6.如果遇到多个受控组件一起，为了合并使用处理函数，给组件添加name属性；

        7.value或者checked的值如果是undefined或者null,则相当于非受控组件；否则，如果不使用处理函数，值无法修改。

    2.非受控组件：不能通过代码来控制值，只能通过用户行为操作值。通过DOM节点来处理数据。

        1.type="file'的input元素是非受控组件；input的其他类型，当不使用value时，是非受控组件；

        2.type="file"也可以传入multiple属性，传多个文件；

        3.组件中使用ref属性，获取DOM节点的值；

        4.input[text]/select/textarea，有defaultValue属性在初次渲染时赋予初始值；input[checkbox][radio]， 有defaultChecked属性来赋初值；

15.[为什么react中要使用jsx语法]

    1.允许使用熟悉的语法来定义 HTML 元素树；

    2.提供更加语义化且移动的标签；

    3.程序结构更容易被直观化；

    4.抽象了 React Element 的创建过程；

    5.可以随时掌控 HTML 标签以及生成这些标签的代码；

    6.是原生的 JavaScript。

16.[列举你知道的react-hooks函数有哪些？]

    1.useState:

        useState 是用于声明一个状态变量的，用于为函数组件引入状态.

        useState 只接收一个参数，这个参数可以是数字、字符串、对象等任意值，用于初始化声明的状态变量。也可以是一个返回初始值的函数，最好是函数，可在渲染时减少不必要的计算。

        返回一个长度为2的读写数组，数组的第一项是定义的状态变量本身，第二项是一个用来更新该状态变量的函数，约定是 set 前缀加上状态的变量名.

        useState Hook 中返回的 setState 并不会帮我们自动合并对象状态的属性;

        setState 中接收的对象参数如果地址没变的话会被 React 认为没有改变，因此不会引起视图的更新

    2.useReducer:

        useReducer 是 useState 的升级版。在 useState 中返回的写接口中，我们只能传递最终的结果，在setN 的内部也只是简单的赋值操作。

        创建初始状态值initialState,

        创建包含所有操作的 reducer(state, action) 函数，每种操作类型均返回新的 state 值

        根据 initialState 和 reducer 使用 const [state, dispatch] = useReducer(reducer, initialState) 得到读写API

        调用写接口，传递的参数均挂在 action 对象上

    3.useContext:

        context 是上下文的意思，上下文是局部的全局变量这个局部的范围由开发者自己指

    4.useEffect:

        effect 是副作用的意思，对环境的改变就是副作用。副作用是函数式编程里的一个概念

        在 React 中，useEffect 就是在每次 render 后执行的操作，相当于 afterRender， 接收的第一个参数是回调函数，第二个参数是回调时机。可用在函数组件中模拟生命周期。

        如果同时出现多个 useEffect ，会按出现顺序依次执行

    5.useLayoutEffect

        useEffect 总是在浏览器渲染完视图过后才执行，如果 useEffect 里面的回调函数有对 DOM 视图的操作，则会出现一开始是初始化的视图，后来执行了 useEffect 里的回调后立马改变了视图的某一部分，会出现一个闪烁的状态。

        为了避免这种闪烁，可以将副作用的回调函数提前到浏览器渲染视图的前面执行，当还没有将 DOM

        挂载到页面显示前执行 Effect 中对 DOM 进行操作的回调函数，则在浏览器渲染到页面后不会出现闪烁的状态。

        layout 是视图的意思，useLayoutEffect 就是在视图显示出来前执行的副作用。

        useEffect 和 useLayoutEffect 就是执行的时间点不同，useLayoutEffect 是在浏览器渲染前执行，

        useEffect 是在浏览器渲染后执行。但二者都是在 render 函数执行过程中运行，useEffect 是在

        render 完毕后执行，useLayoutEffect 是在 render 完毕前（视图还没渲染到浏览器页面上）执行。

        因此 useLayoutEffect 总是在 useEffect 前执行。

        一般情况下，如果 Effect 中的回调函数中涉及到 DOM 视图的改变，就应该用 useLayoutEffect，如果没有，则用 useEffect。

    6.useRef

        useRef Hook 是用来定义一个在组件不断 render 时保持不变的变量。

        组件每次 render 后都会返回一个虚拟 DOM，组件内对应的变量都只属于那个时刻的虚拟 DOM。

        useRef Hook 就提供了创建贯穿整个虚拟 DOM 更新历史的属于这个组件的局部的全局变量。

        为了确保每次 render 后使用 useRef 获得的变量都能是之前的同一个变量，只能使用引用做到，因此，useRef 就将这个局部的全局变量的值存储到了一个对象中，属性名为：current

        useRef 的 current 变化时不会自动 render

        useRef 可以将创建的 Refs 对象通过 ref 属性的方式引用到 DOM 节点或者 React 实例。

        useCallback 是将某个函数“放入到react底层原型链上，并返回该函数的索引”，而useMemo是将某个函数返回值“放入到react底层原型链上，并返回该返回值的索引”。一个是针对函数，一个是针对函数返回值。

    7.useImperativeHandle

        useImperativeHandle可以让父组件获取并执行子组件内某些自定义函数(方法)。本质上其实是子组件将自己内部的函数(方法)通过useImperativeHandle添加到父组件中useRef定义的对象中。

    8.useMemo

        useMemo可以将某些函数的计算结果(返回值)挂载到react底层原型链上，并返回该函数返回值的索引。当组件重新渲染时，如果useMemo依赖的数据变量未发生变化，那么直接使用原型链上保存的该函数计算结果，跳过本次无意义的重新计算，达到提高组件性能的目的。