今日总结

2020-05-08  本文已影响0人  LittleAnt

1.函数组件与类组件的区别?

函数组件:没有实例, 没有生命周期,没有state,只能接收props
类组件:有实例,有生命周期,有state

2.什么是受控组件,非受控组件?

  1. 无法动态输入

举个栗子:
例如:以input框为例,受控组件(已经把原生input包了一层以上)会将input的输入值控制接管起来,也就是说用户的输入完全受react代码控制(基于react状态管理实现),表单元素变更的时候,需要同步更新state的值,否则值的输入、变更都是无效的。在这个基础上我们可以做一些类似数值正负自动翻转,过滤某些敏感字等操作,还可以再表单元素变更之后做一些自定义处理,比如表单的校验,按钮的禁用启用,输入格式的转换等。
非受控组件就是 react不控制用户的输入,用户输入什么react无法控制,一般只是通过ref获取输入的值。
受控组件应用范围更广,但是要略微注意性能问题,非受控组件也有用处,例如原生密码输入框等不需要或者不应该去影响用户操作的地方。因为非受控组件将真实数据储存在 DOM 节点中,所以在使用非受控组件时,有时候反而更容易同时集成 React 和非 React 代码。

背景知识 :

  1. 在 HTML 中,表单元素(如<input><textarea><select>之类的表单元素)通常自己维护 state,并根据用户输入进行更新。
  2. 而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState() 来更新。
    我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
    对于受控组件来说,输入的值始终由 React 的 state 驱动。

3.什么是有状态无状态?

4.什么是高阶组件?容器组件是不是高阶组件?

5.如果有异步操作一般会放到哪些生命周期钩子里?

6.setState放在哪些生命周期钩子里不会导致页面卡死?

7.怎么实现React组件的国际化呢?

一般像多语言国际化这种全局需求,我们可以使用 React 的 context 来全局共享一份相关数据,包含:“当前语言” 和一些通用词汇的语言包。
同时,React 组件本身也可以维护一套自己的语言包,比如时间选择器等,通过获取全局的 “当前语言”,然后通过映射获取指定位置的字符,进行拼接或展示。

在应用过程中,注意几点:

  1. 切换语言是一个低频需求,但语言包可能会比较大,可以按需加载
  2. 限制词语或句子的长度,在语言切换时,长度可能会变化,比如英文单词可能比中文单词长,会影响布局
  3. 注意颜色在不同语言、文化中的差异
  4. 注意日期和货币格式在不同国家和地区的差异显示
    其它的等大家补充。。

React创建动画有几种方式?

创建React动画有以下几种:1.基于定时器或requestAnimationFrame的间隔动画;使用定时器可能会有掉帧问题,而使用requestAnimationFrame则性能较好,完全使用js,不依赖css,帧数跟屏幕刷新率一致,页面运行到后台会自动暂停提高性能。2.基于css3中的animation和transition简单动画;有较高的性能,代码量少,但是只能依赖于css效果,对于复杂动画比较难实现跟控制。3.React动画插件CssTransitionGroup;性能比较好,但限定于入场跟出场场景。4.其他第三方动画库。

8. ['hello','apple','hello'...] 找出重复最多的元素?

1.从左往右一次遍历
2.var obj={};
obj[hello]=1用元素的值当作对象的属性名

https://gitee.com/zhufengpeixun/zhufengreactinterview2020/issues
上一篇下一篇

猜你喜欢

热点阅读