4 - React 面试题

1 组件传值

1 父子组件传值  //自定义属性
  1 父组件中, 使用子组件标签时: <A1 msg={
   'data'}/>  //加自定义属性传值
  2 子组件中, props.msg  //通过 props 接收

2 子父组件传值  //自定义事件
  1 父组件中, 使用子组件标签时: <A1 onTest={
   (data)=>{
   Fn(data)}}/>  //加自定义事件
  2 子组件中, 通过 props 调用自定义事件: props.onTest('data')  //传数据到父组件

3 兄弟组件传值  //状态提升
  1 当兄弟组件之间需要对某些数据进行共享时
  2 把需要被共享的数据, 定义在共同的父组件中, 通过组件通信使用
  
4 mobx: 

5 Redux: 

2 React 中的生命周期

1 挂载阶段
  1 constructor()  -->  组件的创建到销毁, 只执行一次
	1 它是class组件类的构造器, 当组件实例化时首先被调用
	2 是所有生命周期中, 第一个执行的
	3 内部用于定义, class类组件的变量, 且不可以使用this.setState()方法

  2 render()  ---> 组件的创建到销毁, 可执行多次
	1 是所有生命周期中, 唯一的必须存在的生命周期
	2 用于定义 class类组件视图的, 必须有 return 返回值, 且返回 JSX 元素对象
	3 return 之前用于做业务逻辑, 该函数中不可使用 this.setState()方法
	4 在装载阶段和更新阶段都会执行
	5 书写的时候, 往往放在当前组件的最后面
		
  3 componentDidMount()  --> 组件的创建到销毁, 只执行一次 --> 常用
	1 相当于 Vue中的 mounted()  表示视图初始化渲染完成
	2 我们经常在此处 -- 触发调接口, 开启定时器, 长链接, DOM操作

2 更新阶段
  1 componentDidUpdate()  --> 不常用
	1 相当于是 Vue中的 updated(), 它表示视图更新已完成
	2 此处也不能使用 this.setState()
	3 主要作用就是, 性能优化, 抽离处不参与视图渲染的变量, 让他们不执行diff运算

  2 shouldComponentUpdate()  --> 不常用
	1 它是一个开关, 用于控制组件的更新
	3 这个生命周期一定要返回一个布尔值, 返回 false时, 更新失败

3 卸载阶段
  1 componentWillUnmount()  --> 常用
	1 相当于是 Vue中的 beforeDestroy()
	2 在这里一般做清除定时器, 长连接, 清除状态管理的缓存

3 高阶组件

  1 高阶组件 == 高阶函数 == 容器组件 / 被其修饰的组件 == UI组件
  
  2 作用说明
    1 业务逻辑复用的高级技巧, 可让某一个组件, 通过高阶函数内部修饰, 实现功能扩展
    2 高阶组件是非必须使用的, 宏观作用就是, 减少代码量, 让代码变得优雅简洁, 方便管理
    
  3 理解
    1 高阶组件就是一个函数, 内部会 return 一个自己的组件出去
    2 调用高阶组件的时候, 以组件作为参数, 高阶组件会基于这个参数组件, 做一些功能的扩展
    3 这个return出来的新组件, 就是 UI组件与高阶函数扩展功能结合的, 新的组件
    4 高阶组件内部, 会以父子通信的的方式, 来做俩者的一个相关结合
    5 也可以把高阶组件理解为一个工厂, 统一加工一些, 需要扩展某些相同功能的组件类

  4 使用场景
    1 某些视图结构 (HTML结构), 需要被多个组件视图复用的情况
    2 某些业务逻辑, 功能方法等, 需要在多个组件中复用的情况

4 React 开发中, 遇到哪些难点

1 当一个UI组件同时被多个高阶组件修饰时, 发现 props有丢失的情况
  1 需要在高阶组件中的, UI组件实例的位置, <A1 {
   ...this.props} />

2 使用 redux 的时候, dispatch() 不能配发异步任务的情况
  解决, 需要安装一个插件工具 

5 HOOKS

1 描述: React 内置的一组 API
2 作用: 让函数式组件, 也可以使用生命周期, state等特性  //高性能的同时使用需要的一些状态
3 HOOK 有哪些常用的 API 呢: 
  1 useState: 状态 -> 会定义初始化数据类型
  2 useEffect [有日饿饭可特]: 副作用 -> 模拟生命周期的特性, 可以实现调接口等操作
  3 useContext: 深层状态传递 

4 注意事项: 
  1 通常一个副作用只做一件事 (避免代码相互干扰)  //一