郑州制作网站费用,wordpress 汉化 不变,网站美工设计详细步骤,wordpress插件扩展一、React Native介绍
React Native 是Facebook在React.js Conf2015 推出的开源框架#xff0c;使用React和应用平台的原生功能来构建 Android 和 iOS 应用。通过 React Native#xff0c;可以使用 JavaScript 来访问移动平台的 API#xff0c;使用 React 组件来描述 UI 的…一、React Native介绍
React Native 是Facebook在React.js Conf2015 推出的开源框架使用React和应用平台的原生功能来构建 Android 和 iOS 应用。通过 React Native可以使用 JavaScript 来访问移动平台的 API使用 React 组件来描述 UI 的外观和行为。
JS实现调用的能力中间的适配层提供了一些桥接方案 1、RN优势
1.1 HTML/CSS/JS开发成本低用统一的代码规范开发移动端程序不用关注移动端差异
1.2 天然跨平台开发一次可以生成Android和ios两个系统上的APP这减少了开发人员需要编写不同版本的应用程序的时间和工作量。
1.3 无审核热更新
1.4 可扩展
1.5 易学易用React Native 基于 React开发人员可以使用熟悉的 JavaScript 和 React 组件模型来构建应用程序因此很容易学习和上手。
RN的本质是把中间的这个桥Bridge给搭好让JS和native可以互相调用。
RN为我们提供了JS的运行环境所以前端开发者们只需要关心如何编写JS代码
画UI只需要画到virtual DOM 中不需要特别关心具体的平台。
至于如何把JS代码转成native代码的脏活累活RN底层全干了
2、RN劣势
2.1 不成熟项目版本更新维护较频繁学习成本高试错成本高有些问题较少解决方案开发进度慢
2.2 性能整体性能仍不如原生
2.3 兼容性涉及底层的功能需要针对Android和ios双端单独开发
2.4 有限的第三方库尽管 React Native 社区不断增长但相对于其他混合应用框架第三方库和插件的数量还是有限的。这可能使开发人员在某些方面受到限制。
2.5 有些原生功能需要自己实现虽然 React Native 提供了大量原生组件但某些原生功能需要开发人员自己实现这可能需要额外的时间和工作量。
3、跨平台框架比较 开发模式 原生开发 混合开发 Web开发 运行环境 Android、iOS、Windows 混合App、 React NativeWeex、Flutter 浏览器、WebView 编程语言 JavaObjective-C JavaScript、Dart HTML、CSS、JavaScript 可移植性 差 一般 好 开发速度 慢 一般 快 性能 快 一般 慢 学习成本 高 一般 低
4、Hybrid App 优势
4.1 跨平台开发
4.2 离线访问
4.3 原生应用程序的用户体验
4.4 快速开发和迭代
混合应用程序结合了Web应用程序和本地应用程序的优点既能够在原生应用程序环境中运行也能够在 Web 浏览器中运行并且具有更好的用户体验和功能。这种开发方式可以大大减少开发时间和成本提高开发效率。
5、React Native 0.68之前的架构 5.1、整体UI渲染太过于依赖JsBridge容易出现阻塞影响整体UI体验
5.2、性能和问题反馈最大的组件 ScrollView一次渲染不做任何回收启动性能慢占用内存大 FlatList做了组件回收快速滑动中容易出现白屏和卡顿 Shadow层最终呈现到原生的UI是异步的滑动太快会有大量的UI
5.3、事件阻塞在JsBridge导致了长时间白屏的出现
6、RN中的视图渲染
javascriptJS代码的执行线程将源码通过Metro打包后传给JS引擎进行解析 结构 样式 属性
Main线程UI线程或原生线程主要负责原生渲染Native UI和调用原生模块Native Modules Shadow 线程Layout线程创建Shadow Tree来模拟Reac结构树类似虚拟DOM再由Yoga引擎将Flexbox等样式解析成平台的布局方式 宽高 位置
7、RN架构设计--新旧架构对比 7.1、JavaScript层
支持React 16新特性
增强JS静态类型检查CodeGen
引入JSI允许替换不同的JavaScript引擎 7.2、Bridge层
划分了Fabric和TurboModules分别负责管理UI和Native模块 7.3、Native层
精简核心模块将非核心部分拆除去作为社区模块独立维护
8、从 0.68 版本开始React Native 的新架构
8.1、JSI JavaScript Interface 一个用 C 写成的轻量级框架 实现JS引擎的互换 通过JS直接调用Native 减少不必要的线程通信省去序列化和反序列化的成本 减轻了通信压力提高了通信性能
8.2、CodeGen FaceBook推出的代码生成工具 加入了类型约束后减少了数据类型错误 自动将 Flow 或 TS 有静态类型检查的 JS 代码转换为 Fabric 和 TurboModules 使用的原生代码
8.3、优化Bridge层 Fabric是整个框架中的新UI层简化了之前的渲染 Turbo Modules通过JSI可以让JS直接调用Native模块实现同步操作实现Native模块按需加载减少启动时间提高性能
8.4、精简核心代码LEAN Core 将React Native核心包进行瘦身非必要包移到社区单独维护
9、React介绍
FacebookLearn Oncewrite anywhere
数据驱动状态决定界面的变化虚拟dom抽象层
虚拟dom的好处首先是性能的优化不直接操作Dom先进行一些比较计算找出需要变化的部分在实际的dom中进行操作 其次这个抽象层还提供了逻辑代码跨平台移植的可能性
虚拟dom的下方对接的是网页是移动端是电视端任何一个可以渲染的端都可以做接口的适配使得代码在任何地方使用
主要四个部分
组件类组件、函数式组件
属性Props
状态State
jsxReact 和 React Native 都使用JSX 语法这种语法使得你可以在 JavaScript 中直接输出本质上也就是 JavaScript所以你可以在其中直接使用变量元素JSX
hook api: todo补充
生命周期 todo补充
二、性能优化点
1、RN加载的主要时间消耗
todo补充
2、RN性能优化-拆包、分包
React Native 页面的 JavaScript 代码包是热更新平台根据版本号进行下发的每次有业务改动我们都需要通过网络请求更新代码包。
因此我们在对JavaScript 代码进行打包的时候需要将包拆分成两个部分
2.1、Common 部分也就是 React Native 源码部分
2.2、业务代码部分也就是我们需要动态下载的部分
具体操作
JavaScript 代码包中 React Native 源码相关的部分是不会发生变化的所以我们不需要在每次业务包更新的时候都进行下发在工程中内置一份就好了。Common 包内置到工程中业务代码包进行动态下载利用 JSContext 环境在进入载体页后在环境中先加载 Common 包再加载业务代码包就可以完整的渲染出 React Native 页面
todo代码示例
3、首屏渲染
通过拆包的方案已经减少了动态下载的业务代码包的大小。但是还会存在部分业务非常庞大拆包后业务代码包的大小依然很大的情况依然会导致下载速度较慢并且还会受网络情况的影响。
因此我们可以再次针对业务代码包进行拆分
将一个业务代码包拆分为一个主包和多个子包的方式
在进入页面后优先请求主包的 JavaScript 代码资源能够快速地渲染首屏页面
紧接着用户点击某一个模块时再继续下载对应模块的代码包并进行渲染就能再进一步减少加载时间。
4、减少渲染的节点-通过组件懒加载提高应用性能
组件懒加载可以让 react 应用在真正需要展示这个组件的时候再去展示有效的减少渲染的节点数提高页面的加载速度
React 官方在 16.6 版本后引入了新的特性React.lazy 和 React.Suspense这两个组件的配合使用可以比较方便进行组件懒加载的实现
React.lazy 该方法主要的作用就是可以定义一个动态加载的组件这可以直接缩减打包后 bundle 的体积
并且可以延迟加载在初次渲染时不需要渲染的组件 Suspense组件中的 fallback 属性接受任何在组件加载过程中你想展示的 React 元素。
你可以将 Suspense 组件置于懒加载组件之上的任何位置你甚至可以用一个 Suspense 组件包裹多个懒加载组件。 代码示例如下
import React, {Suspense} from react;
const OtherComponent React.lazy(() import(./OtherComponent));
const AnotherComponent React.lazy(() import(./AnotherComponent));
function MyComponent() {return(divSuspense fallback{div loading.../div}sectionOtherComponent/AnotherComponent//section/Suspense/div)
}
使用懒加载可以减少bundle文件大小
不同的文件打包到不同的页面组件当中加快组件的呈现
import React, {lazy, Suspense} from react;
const OtherComponentLazy lazy(() import(./OtherComponent));
const AnotherComponentLazy lazy(() import(./AnotherComponent));
function Suspensed(lazyComponent) {return (props) {Suspense fallback{div/div}lazyComponent {...props} //Suspense}
}
export const OtherComponent Suspensed(OtherComponentLazy)
export const AnotherComponent Suspensed(AnotherComponentLazy)
5、提交阶段优化-避免重复无限渲染 当应用程序状态发生更改时React会调用render方法。
如果在render方法中继续更改应用程序状态就会发生render方法递归调用导致应用报错。
Render方法应该作为纯函数render方法的执行要根据状态的改变保持组件的行为和渲染方法一致。
执行提交阶段钩子会阻塞浏览器更新页面。
如果在提交阶段钩子函数中更新组件 State会再次触发组件的更新流程造成两倍耗时。
一般在提交阶段的钩子中更新组件状态的场景有
类组件应使用 getDerivedStateFromProps 钩子方法代替函数组件应使用函数调用时执行 setState的方式代替。使用上面两种方式后React 会将新状态和派生状态在一次更新内完成。根据 DOM 信息修改组件状态。在该场景中除非想办法不依赖 DOM 信息否则两次更新过程是少不了的就只能用其他优化技巧了。
6、组件卸载前执行清理操作
React 组件性能优化的核心是减少渲染真实DOM节点的频率减少Virtual DOM 比对的频率
在组件中为window注册的全局事件以及定时器在组件卸载前要清理掉防止组件卸载后继续执行影响应用性能
import React,{Component
} from react;export default class Hello extends Component {componentDidMount() {this.timer setTimeout(() { console.log(把一个定时器的引用挂在this上); },500);}componentWillUnmount() {// 如果存在this.timer则使用clearTimeout清空。// 如果你使用多个timer那么用多个变量或者用个数组来保存引用然后逐个clearthis.timer clearTimeout(this.timer);}
};
7、通过使用占位符标记提升React组件的渲染性能
使用Fragment不对应具体的视图减少了包含的额外标记的数量
仅仅是代表可以包装而已跟空的标识符一样视图层级关系减少有利于视图渲染
满足在组件顶级具有单个父级的条件
div
...
/div
// 上面会多出一个无意义标记
// 应该改为
fragment
...
/fragment
// 或者写成下面这样也是可以的...
/
8、缩小状态影响范围-状态下放到使用组件的内部
React不直接操作DOM它在内存中维护一个快速响应的DOM描述render方法返回一个DOM的描述
React能够计算出两个DOM描述的差异然后更新浏览器中的DOM这就是著名的DOM Diff。
就是说React在接收到属性(props)或者状态(state)更新时就会通过前面的方式更新UI。所以React整个UI渲染是比较快的。但是这里面可能出现的问题是
假设我们定义一个父组件其包含了5000个子组件。我们有一个输入框输入操作每次输入一个数字对应的那个子组件背景色变红。
父组件更新默认触发所有子组件更新子组件的props为空对象{} {} 永远会返回false
优化思想将变的和不变的分开statepropscontext
我们需要先手动创建一个有严重渲染性能的组件如下所示
import { useState } from react;export default function App() {let [color, setColor] useState(red);return (divinput value{color} onChange{(e) setColor(e.target.value)} /p style{{ color }}Hello, world!/pExpensiveTree //div);
}function ExpensiveTree() {let now performance.now();while (performance.now() - now 100) {// Artificial delay -- do nothing for 100ms}return pI am a very slow component tree./p;
}
很显然当 App 组件内的状态发生了改变ExpensiveTree 组件会 re-render 事实上 ExpensiveTree 组件的 props、state 并未发生改变这并不是我们期望的结果。
export default function App() {let [color, setColor] useState(red);return (divinput value{color} onChange{(e) setColor(e.target.value)} /p style{{ color }}Hello, world!/pExpensiveTree //div);
}
我们可以看到以上 ExpensiveTree 组件并不依赖 App 组件内部的状态因此我们是否可以考虑将依赖 color 的元素抽离到一个依赖 color 的组件中呢
export default function App() {return (Form /ExpensiveTree //);
}function Form() {let [color, setColor] useState(red);return (input value{color} onChange{(e) setColor(e.target.value)} /p style{{ color }}Hello, world!/p/);
}
此时将依赖 color 的元素提取到了 Form 组件中Form 组件内部的状态不再影响 ExpensiveTree 组件的渲染问题便得到了解决。
9、跳过不必要的组件更新-通过纯组件提升性能
类组件中使用PureComponent函数式组件中使用React.memo
在 React 工作流中如果只有父组件发生状态更新即使父组件传给子组件的所有 Props 都没有修改也会引起子组件的 Render 过程。
如果子组件的 Props 和 State 都没有改变那么其生成的 DOM 结构和副作用也不应该发生改变。
纯组件会对组件输入数据进行浅层比较如果当前输入数据和上次输入数据相同组件不会重新渲染。
比较引用数据类型在内存中的引用地址是否相同比较基本数据类型的值是否相同
为什么不直接进行diff操作而要先进行浅比较
浅比较只操作当前组件的state和propsdiff操作会重新遍历整个VirtualDOM树
10、跳过不必要的组件更新-通过shouldComponentUpdate
纯函数只能进行浅层比较要进行深层比较
使用shouldComponentUpdate它用于编写自定义比较逻辑
ShouldComponentUpdatenextPropsnextState{if(nextProps……){return true}return false
}
11、跳过不必要的组件更新-通过memo纯组件提升性能
Memo基本使用将函数组件变为纯组件当前props和上一次的props进行浅比较如果相同就阻止组件重新渲染
Memo函数是浅层数据比较如果遇到引用数据类型需要传递自定义比较逻辑传给Memo函数的第二个参数
memo的第二个参数示例如下
// 给memo传递第二个参数自定义比较逻辑
import React, { memo, useEffect, useState } from react
function App () {const [person, setPerson] useState({ name: 张三, age: 20, job: waiter })const [index, setIndex] useState(0)useEffect(() {let timer setInterval(() {setIndex(prev prev 1)setPerson({ ...person, job: chef })}, 1000)return () {clearInterval(timer)}}, [index, person])return (div{index}ShowName person{person} //div)
}
function compare (prevProps, nextProps) {if (prevProps.person.name ! nextProps.person.name ||prevProps.person.age ! nextProps.person.age) {return false}return true
}
const ShowName memo(function ({ person }) {console.log(render...)return (div{person.name} {person.age}/div)
}, compare)
export default App
12、跳过不必要的组件更新- useMemo、useCallback缓存优化
useMemo、useCallback 实现稳定的 Props 值
useMemo 缓存上次计算的结果当 useMemo 的依赖未发生改变时就不会触发重新计算一般用在非常耗时的场景中
如遍历大列表做统计信息。
useCallback 将父组件传递给子组件时子组件会因为重新render发生改变的时候缓存一个值
useCallback 是 React 的一个 Hook它用于记住函数的引用避免在每次渲染时都创建一个新的函数实例。这可以帮助优化性能因为避免不必要的重渲染和子组件的重新渲染。
使用场景
当你有一个函数它依赖于某些 props 或 state但你不希望它在这些依赖发生变化时重新创建你可以使用 useCallback 来保持引用不变。
如果你有一个子组件它是纯的不依赖外部状态只依赖于传入的 props并且你希望避免非必要的重渲染你可以使用 useCallback 来保证传递给子组件的函数引用保持不变。
例子代码
import React, { useCallback } from react;
function ParentComponent() {const [count, setCount] useState(0);// 使用 useCallback 来避免在每次渲染时都创建一个新的函数实例const incrementCount useCallback(() {setCount(count 1);
}, [count]);
return (divpCount: {count}/p button onClick{incrementCount}Increment/buttonChildComponent onIncrement{incrementCount} //div
);
}
function ChildComponent({ onIncrement }) {
// 这里我们不需要每次 ParentComponent 渲染时都创建一个新的函数实例
// 因为 onIncrement 引用没有变化return button onClick{onIncrement}Increment from Child/button;
}
在这个例子中incrementCount 是一个函数用于增加计数。我们使用 useCallback 来保证在 ParentComponent 的多次渲染中incrementCount 函数的引用是不变的这样 ChildComponent 就不会因为 ParentComponent 的渲染而不必要地重新渲染。
13、列表使用Key属性
遍历展示视图时使用 keykey 帮助 React 识别哪些元素改变了比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识
const numbers [1, 2, 3, 4, 5];
const listItems numbers.map((number)
li key{number.toString()} {number} /li);
使用 key 注意事项
这个元素在列表中拥有的一个独一无二的字符串。通常我们使用数据中的 id 来作为元素的 key
14、不要使用内联函数定义
如果使用内联函数函数是引用数据类型在内存中的地址不会相同则每次render函数时都会创建一个新的函数实例
在渲染阶段会绑定新函数并将旧实例扔给垃圾回收因此绑定内联函数需要额外的垃圾回收和绑定到DOM的工作
1.Render(){Return (input type“button” onClick{(e){this.setState({inputVal:e.target.value})}})
}2.setNewState(e)-{this.setState({inputVal:e.target.value})}
//箭头函数被添加到类的实例对象属性而不是原型对象属性如果组件被多次重用每个实例都会有一个相同的函数实例降低了函数实例的可重用性造成了资源的浪费
Render(){Return (input type“button” onClick{(e){this.setNewState}/ )
}3.Export default class a extends React.Component{constructor(){this.handleClick this.handClick.bind(this)//构造函数只执行一次}
}
handleClick(){xxxxx}
input type“button” onClick{this.handleClick}/
//render方法每次执行时都会调用bind方法生成新的函数实例
input type“button” onClick{this.handleClick.bind(this)}/
15、避免使用内联样式
使用内联样式时会被编译为JavaScript代码JavaScript将样式规则映射到元素上浏览器需要花费更多时间处理脚本和渲染UI。
它是在执行时为元素添加样式而不是在编译时为元素添加样式。
因此性能非常的低更好的办法是将CSS文件导入组件。能通过css直接做的事情就不要通过JavaScript去做因为JavaScript操作DOM非常慢
16、事件节流和防抖
利用debounce、throttle 避免重复回调
节流
意味着不会立即执行在触发事件之前会加上几毫秒延迟
throttle 更适合需要实时响应用户的场景中更适合
如通过拖拽调整尺寸或通过拖拽进行放大缩小如window 的 resize 事件。实时响应用户操作场景中如果回调耗时小
甚至可以用 requestAnimationFrame 代替 throttle。
页面滚动到底部的时候使用节流否则触发多个网络请求调用导致性能问题 防抖
在输入框中键入数据直到用户不再输入数据为止兼容网络调用提升性能
在搜索场景中只需响应用户最后一次输入无需响应用户的中间输入值
debounce 更适合使用在该场景中。
