RN高级interview

1、生命周期

1、挂载过程

constructor()

componentWillMount()

componentDidMount()

2、更新过程

componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps,nextState)

componentWillUpdate (nextProps,nextState)

render()

componentDidUpdate(prevProps,prevState)

3、卸载过程

componentWillUnmount()

2、React-native性能优化

  • 减少 re-render

shouldComponentUpdate自定义比较过程

React.memo(默认情况下,它和 PureComponent 一样,都是进行浅比较,因为就是个高阶组件,在原有的组件上套一层就可以了:)

React.PureComponent

  • 减轻渲染压力

React.Fragment

空标签<></>

4、统一封装的问题

rn页面需要接入友盟统计、或者说统一接入接入toast,你能想到哪些方法?你认为哪种更合适

如果是大部分页面需要接入,调试页等少部分页面不需要接入你会怎么处理?

  • 基类的优点
    • 1、子类可以较为简单的复用父类的方法
  • 基类的缺点
    • 1、继承意味着子类无差别的拥有父类方法,这样会造成子类代码污染
    • 2、特别在React中父类控制子类页面渲染逻辑,会造成子类的生命周期紊乱,无法使用最原始的生命周期方法。

5、Mixin -> hoc -> hook的演进

Mixin -> hoc -> hook

Mixin:相互依赖,相互耦合,不利于代码维护

hoc 回调地狱,ref问题

6、RN引入原生组件使用

react 复制代码
import {
    requireNativeComponent,
} from 'react-native';
const AudioWaveView = requireNativeComponent('AudioWaveView', AudioWaveComponent);

7、RN调用原生

如果涉及到原生处理完后回调,有callback、promise两种写法

react 复制代码
import {
    NativeModules,
} from 'react-native';
NativeModules.commModule.moveTaskToBack();

8、原生发消息给RN

通过emit发送

java 复制代码
sendTransMisson(mContext, "DeviceToken", event.getDeviceToken());
public void sendTransMisson(ReactContext reactContext, String eventName, @Nullable String params) {
    reactContext
            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, params);

}

addListener监听接收

react 复制代码
PushMessageUtil.addListener('DeviceToken', (deviceToken) => {
    console.log('deviceToken:', deviceToken);
});
相关推荐
知识分享小能手14 分钟前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one15 分钟前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲16 分钟前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell1 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830942 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
gnip3 小时前
JavaScript事件流
前端·javascript
小菜全4 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
wow_DG4 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904274 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路4 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架