state 和 props有什么区别?
两者相同点:
- 两者都是 JavaScript 对象
- 两者都是用于保存信息
- props 和 state 都能触发渲染更新
区别:
- props 是外部传递给组件的,而 state 是在组件内被组件自己管理的,一般在 constructor 中初始化
- props 在组件内部是不可修改的,但 state 在组件内部可以进行修改
- state 是多变的、可以修改
super()和super(props)有什么区别?
在React
中,类组件基于ES6
,所以在constructor
中必须使用super
在调用super
过程,无论是否传入props
,React
内部都会将porps
赋值给组件实例porps
属性中
如果只调用了super()
,那么this.props
在super()
和构造函数结束之间仍是undefined
setState执行机制?
在react
类组件的状态需要通过setState
进行更改,在不同场景下对应不同的执行顺序:
- 在组件生命周期或React合成事件中,setState是异步
- 在setTimeout或者原生dom事件中,setState是同步
当我们批量更改state
的值的时候,react
内部会将其进行覆盖,只取最后一次的执行结果
当需要下一个state
依赖当前state
的时候,则可以在setState
中传递一个回调函数进行下次更新
React的事件机制?
React
基于浏览器的事件机制自身实现了一套事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等
组件注册的事件最终会绑定在document
这个 DOM
上,而不是 React
组件对应的 DOM
,从而节省内存开销
自身实现了一套事件冒泡机制,阻止不同时间段的冒泡行为,需要对应使用不同的方法
事件绑定的方式有哪些?
react
常见的绑定方式有如下:
- render方法中使用bind
- render方法中使用箭头函数
- constructor中bind
- 定义阶段使用箭头函数绑定
前两种方式在每次组件render
的时候都会生成新的方法实例,性能问题欠缺
构建组件的方式有哪些?区别?
组件的创建主要分成了三种方式:
- 函数式创建
- 继承 React.Component 创建
- 通过 React.createClass 方法创建
如今一般都是前两种方式,对于一些无状态的组件创建,建议使用函数式创建的方式,再比如hooks
的机制下,函数式组件能做类组件对应的事情,所以建议都使用函数式的方式来创建组件
组件之间如何通信?
组件间通信可以通过props
、传递回调函数、context
、redux
等形式进行组件之间通讯
key有什么作用?
使用key
是react
性能优化的手段,在一系列数据最前面插入元素,如果没有key
的值,则所有的元素都需要进行更换,而有key
的情况只需要将最新元素插入到前面,不涉及删除操作
在使用key
的时候应保证:
- key 应该是唯一的
- key不要使用随机值(随机数在下一次 render 时,会重新生成一个数字)
- 避免使用 index 作为 key
refs 的理解?应用场景?
Refs
允许我们访问 DOM
节点或在 render
方法中创建的 React
元素
下面的场景使用refs
非常有用:
- 对Dom元素的焦点控制、内容选择、控制
- 对Dom元素的内容设置及媒体播放
- 对Dom元素的操作和对组件实例的操作
- 集成第三方 DOM 库
Hooks的理解?解决了什么问题?
Hook
是 React 16.8 的新增特性。它可以让你在不编写 class
的情况下使用 state
以及其他的 React
特性
解决问题如下:
- 难以重用和共享组件中的与状态相关的逻辑
- 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 local state 时,每个生命周期函数中可能会包含着各种互不相关的逻辑在里面
- 类组件中的this增加学习成本,类组件在基于现有工具的优化上存在些许问题
- 由于业务变动,函数组件不得不改为类组件等等
如何引入css?
常见的CSS
引入方式有以下:
- 在组件内直接使用
- 组件中引入 .css 文件
- 组件中引入 .module.css 文件
- CSS in JS
组件内直接使用css
会导致大量的代码,而文件中直接引入css
文件是全局作用域,发生层叠
引入.module.css
文件能够解决局部作用域问题,但是不方便动态修改样式,需要使用内联的方式进行样式的编写
css in js
这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义、修改状态等