每日五道面试题总结 22/7/23

一、 React 组件 的生命周期几个阶段？

1、初始渲染阶段：这是组件即将开始 创建 并进入 DOM阶段

   getDefaultProps:获取实例的默认属性

   getlnitilState：获取每个实例的初始状态

   初始化阶段完成 开始页面 dom 挂载阶段

   componentWillMount：组件即将被装载，渲染到页面上

   render：渲染阶段 组件在这里 生成 虚拟 DOM 节点

   componentDidMount：组件在渲染完成后加载页面后

2、更新阶段 （在属性或者 props 变更才会重新渲染）

   componentWillReceiveProps：组件将要接到属性时，也就是属性更新前

   shouldComponentUpdate：组件是否需要更新 返回布尔值 来判断是否更新 

   componentWillUpdate：组件即将更新不能修改状态属性

   render：组件更新 重新渲染

   componentDidUpdate：组件更新完成 created 组件是新的数据 已经更新

3、卸载阶段  最后的阶段 销毁组件

   componentWillUnmount：组件即将被销毁

   二、React 组件之间的通讯

   通讯方式：

   1、父子通讯：父传子 ：props 属性  字传父： 父传方法给子，子调用

   2、兄弟：利用 redux 

   3、非父子组件：发布订阅 pubsub ，状态数 context，状态提升 通过父组件

父传子 （利用props 属性传参）

  利用父组件内给子组件标签，利用props给属性赋值，在子组件内使用 this.props.属性

子传父 （回调函数）

   父组件定义函数，传给子组件，在子组件内调用该函数，并传入数据，父组件内接收

兄弟（利用redux 状态管理器 实现）

发布订阅

   相当于 vue 中的 事件总线（event bus）

   创建 Pubsub实例 并对外导出

   1、订阅 接收数据 ： pubsub.subscribe（“事件名”，function（data）{接受数据 data}）

   2、发布 传送数据 ： pubsub.publish（“事件名”，数据）

   3、清除所有订阅 ：pubsub.unsubscribe（token|“事件名”）

   4、清除所有：pubsub.unsubscribeall()

状态树 context

   1、创建 createContext（）s实例 用于提供 defaulValue 的参数，

        返回 提供者（Provider），以及消费者 使用者 （Consumer）

        Provider 将下层的标签包裹，这时底层标签就可以接收值 顶层配置

        Consumer 接收者 直接用标签的方式 内部是一个函数 并且有返回值

三、你对hooks 的理解？ 主要用来解决什么问题？

   1、HooK 是什么？

   Hook 是React 16.8 的新增特性！它可以在使用函数组件时，使用state （状态机）或者其他的特性，比如说类似于 钩子函数 ，在函数组件中也是可以变成状态组件

   只能在顶层使用，不要再循环或嵌套函数中使用

   2、常见的 hooks ：useState 。useEffect 

   useState （类似状态机）

格式 const [ 状态命，更新状态函数 ] = React.useState（初始值 | 函数）

更改数据  调用更新状态的函数  更新函数（{...结构之前的数据   新值  }） 更新函数（基本类型）

   useEffect （）

每次组件更新后，就会触发 useEffect ，可以把这和函数当作 componentDidMount，componentDidUpdate，和 componentWillUnmont 这三个钩子函数组合

   执行条件

一个参数：     useEffect（ （）=>{  执行函数 }）  会无条件执行 

两个参数：     第二个参数为依赖项，是否执行 根据依赖项来判定

                        useEffect（ （）=>{  执行函数 },[  数组  ]）  数组中依赖项发生变化，就会执行  

四、什么是受控组件，以及非受控组件

   受控组件：

React 控制组件，input等表单输入，不存在DOM中，而是存在组件状态中，每当我们想要更新时，就像调用 setState一样使用

   不受控组件：

表单数据由DOM处理，而不是React组件本身处理，利用Refs target value 获取当前值

五、说说对React 事件机制的理解？

1、React 的事件机制是什么？

   React 基于浏览器的事件机制自身实现了一套事件机制，包括：事件注册，事件的合成，事件冒泡，事件派发，在React 这套事件机制被称之为合成事件

2、执行顺序：

1. React 所有的事件都挂载在 document 对象上
2. 当真实 DOM 元素触发事件，会冒泡到 document 上 在处理React 事件
3. 会先执行原生事件，然后再处理React 事件
4. 最后执行真正的 document 上的 挂载事件

3、总结

React的事件最后会被挂载到 document 上 他的自身实现了一套事件冒泡机制，所以使用 event.stopPropagation( ) 是无效的，通过队列的形式，从触发的组件向父组件回溯，然后调用在JSX中定义的 回调函数

六、 React 引入css 的方式有哪些？

1、在组件内直接使用

      在组件内以对象键值对的形式配置样式，在 render 内部 标签 style 样式赋值

      内联样式，不会引起冲突，动态获取值 不建议使用 代码量大，比较混乱，有些样式无法编写

2、组件中引入 css  文件

      将 CSS 文件 单独写入一个文件 然后在组件中引入  变成全局的样式，classname会相互影响

3、组件中引入 module.css 文件

     模块化  只作用于当前组件 不会互相影响

4、CSS in JS

      未作了解...