React NativeRN采用JavaScript编写应用逻辑利用React框架构建UI。在运行时RN通过桥接机制将JavaScript代码与原生平台代码进行通信。对于iOS和AndroidRN分别有对应的原生渲染引擎。在iOS上它利用iOS的原生UI组件和API在Android上则使用Android的原生UI组件和API。这样RN代码在不同平台上可以调用各自平台的原生能力实现界面渲染和功能交互。当开发者编写一个按钮组件时RN会根据当前运行的平台将这个按钮渲染为iOS风格或Android风格的原生按钮。这一过程中RN的桥接机制起到关键作用它负责将JavaScript层的指令传递给原生层同时将原生层的事件和数据反馈给JavaScript层。React Native UI 组件Android 原生视图iOS 原生视图Web 标签说明ViewViewGroupUIViewA non-scrollingdiv不支持滚动支持flexbox、触摸处理和无障碍性控件的容器TextTextViewUITextViewp显示、样式和嵌套文本字符串甚至处理触摸事件ImageImageViewUIImageViewimg显示不同类型的图片ScrollViewScrollViewUIScrollViewdiv一个通用的滚动容器可以包含多个组件和视图,适合用来显示数量不多的滚动元素立即渲染所有元素TextInputEditTextUITextFieldinput typetext使用户可以输入文本FlatList显示较长的滚动列表,性能更好垂直的滚动列表其中的元素之间结构近似而仅数据不同FlatList并不立即渲染所有元素而是优先渲染屏幕上可见的元素SectionList可以分组的listReact基础components 组件、JSX、props 属性、state 状态Function Compomentsimport React from react;import { Text } from react-native;const Cat () {// 这个函数的返回值就会被渲染为一个 React 元素return (TextHello, I am your cat!/Text);}// 使用了export default语句来导出这个组件以使其可以在其他地方引入使用export default Cat;Class Compomentsimport React, { Component } from react;import { Text } from react-native;// 定义组件首先要继承(extends)自Componentclass Cat extends Component {// Class 组件必须有一个render()函数它的返回值会被渲染为一个 React 元素render() {return (TextHello, I am your cat!/Text);}}export default Cat;JSX: JavaScript XML一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖也是react.js的使用基础。React在不使用JSX的情况下一样可以工作然而使用JSX可以提高组件的可读性// 使用JSrender:function (){return React.createElement(div, {className: divider},Label Text,React.createElement(hr));}// 使用JSXrender:function (){return div classNamedividerLabbel Texthr//div}在 React Native 0.71 版本之前JSX 语法糖的实质是调用React.createElement方法所以你必须在文件头部引用import React from react。但在 React Native 0.71 版本之后官方引入了新的 JSX 转换可以不用再在文件头部写import React from react。Props是“properties”属性的简写。Props 使得我们可以定制组件import React from react;import { Text, View } from react-native;const Cat (props) {return (ViewTextHello, I am {props.name}!/Text/View);}const Cafe () {return (ViewCat nameMaru /Cat nameJellylorum /Cat nameSpot //View);}export default Cafe;State 状态如果把 props 理解为定制组件渲染的参数 那么state就像是组件的私人数据记录。状态用于记录那些随时间或者用户交互而变化的数据。Function Componentsimport React, { useState } from react;import { Button, Text, View } from react-native;const Cat (props) {const [isHungry, setIsHungry] useState(true);return (ViewTextI am {props.name}, and I am {isHungry ? hungry : full}!/TextButtononPress{() {setIsHungry(false);}}disabled{!isHungry}title{isHungry ? Pour me some milk, please! : Thank you!}//View);}const Cafe () {return (Cat nameMunkustrap /Cat nameSpot //);}export default Cafe;Class Componentsimport React, { Component } from react;import { Button, Text, View } from react-native;class Cat extends Component {state { isHungry: true };render() {return (ViewTextI am {this.props.name}, and I am{this.state.isHungry ? hungry : full}!/TextButtononPress{() {this.setState({ isHungry: false });}}disabled{!this.state.isHungry}title{this.state.isHungry ? Pour me some milk, please! : Thank you!}//View);}}class Cafe extends Component {render() {return (Cat nameMunkustrap /Cat nameSpot //);}}export default Cafe;Platform 模块React Native 提供了一个检测当前运行平台的模块Platform.OS在 iOS 上会返回ios而在 Android 设备或模拟器上则会返回androidPlatform.select()它可以以 Platform.OS 为 key从传入的对象中返回对应平台的值import {Platform, StyleSheet} from react-native;const styles StyleSheet.create({height: Platform.OS ios ? 200 : 100,});Platform.Version // Android 版本、iOS 版本特定平台后缀当不同平台的代码逻辑较为复杂时最好是放到不同的文件里这时候我们可以使用特定平台后缀。React Native 会检测某个文件是否具有.ios.或是.android.的后缀然后根据当前运行的平台自动加载正确对应的文件。BigButton.ios.jsBigButton.android.jsimport BigButton from ./BigButton; // 去掉平台后缀直接引用Style:要求使用了驼峰命名法,后声明的属性会覆盖先声明的同名属性import React from react;import { StyleSheet, Text, View } from react-native;const LotsOfStyles () {return (View style{styles.container}Text style{styles.red}just red/TextText style{styles.bigBlue}just bigBlue/TextText style{[styles.bigBlue, styles.red]}bigBlue, then red/TextText style{[styles.red, styles.bigBlue]}red, then bigBlue/Text/View);};const styles StyleSheet.create({container: {marginTop: 50,},bigBlue: {color: blue,fontWeight: bold,fontSize: 30,},red: {color: red,},});export default LotsOfStyles;React Native 中的尺寸都是无单位的表示的是与设备像素密度无关的逻辑像素点在不同尺寸的屏幕上都显示成一样的大小百分比宽高要求父容器有一个明确的尺寸。Image标签src属性改为source不接受字符串是一个带有uri属性的对象Image source{{uri: https://facebook.github.io/react/logo-og.png}}style{{width: 400, height: 400}} /URI 是统一资源标识符URL 是统一资源定位符。URL 是 URI 的子集所有 URL 都是 URI但不是所有 URI 都是 URL。URI 身份证号标识你是谁 URL 家庭住址告诉你去哪找你需要手动指定图片的尺寸、需要使用 https 以满足 iOSApp Transport Security的要求在浏览器中不给图片指定尺寸浏览器会先渲染一个 0x0 大小的元素占位然后下载图片在下载完成后再基于正确的尺寸来渲染图片抖动。在React Native中我们有意避免了这一行为。开发者需要做更多工作来提前知晓远程图片的尺寸或宽高比读取本地静态图片使用require(./my-icon.png)语法则无需指定尺寸因为它们的尺寸在加载时就可以立刻知道。比如require(./my-icon.png)的实际输出结果可能是{__packager_asset:true,uri:my-icon.png,width:591,height:573}Hooks是 React 16.8 引入的新特性让你在函数组件中使用状态和生命周期等 React 特性1.为什么需要hooks// ❌ 类组件- 以前的方式class Counter extends React.Component {state { count: 0 };componentDidMount() {document.title 点击了 ${this.state.count} 次;}render() {return (button onClick{() this.setState({ count: this.state.count 1 })}点击次数: {this.state.count}/button);}}// ✅ 函数组件 Hooks - 现在的方式const Counter () {const [count, setCount] useState(0);useEffect(() {document.title 点击了 ${count} 次;}, [count]);return (button onClick{() setCount(count 1)}点击次数: {count}/button);};2.hooks解决的问题问题说明类组件复杂this 指向混乱、生命周期方法分散逻辑复用难以前需要高阶组件、render props代码冗余相关逻辑被迫拆分到不同生命周期难以理解类组件的学习曲线较陡3.常见的hooks基础Hook作用示例useState状态管理const [count, setCount] useState(0)useEffect副作用处理useEffect(() { ... }, [])useContext跨组件共享状态const value useContext(MyContext)额外Hook作用useRef引用 DOM 或保存值useMemo缓存计算结果useCallback缓存函数引用useReducer复杂状态管理useLayoutEffectDOM 更新后同步执行1.useState - 状态管理const [count, setCount] useState(0);setCount(1); // 直接设置2. useEffect - 副作用处理// 挂载时执行一次useEffect(() {fetchData();}, []);// 依赖变化时执行useEffect(() {fetchUser(userId);}, [userId]);3. useRef - 引用// 引用 DOMconst inputRef useRefHTMLInputElement(null);input ref{inputRef} /inputRef.current?.focus();// 保存值不触发渲染const countRef useRef(0);countRef.current countRef.current 1;4.useMemo - 缓存计算结果/ 仅当依赖变化时重新计算const expensiveValue useMemo(() { return computeExpensiveValue(a, b); }, [a, b]);5.useCallback - 缓存函数// 仅当依赖变化时重新创建函数 const handleClick useCallback(() { doSomething(a, b); }, [a, b]);fetch: React Native 提供了和 web 标准一致的Fetch API用于满足开发者访问网络的需求, Chrome 调试目前无法观测到 React Native 中的网络请求可使用第三方的react-native-debugger来进行观测。默认情况下iOS 会阻止所有 http 的请求 Android9 开始也会默认阻止 http 请求以督促开发者使用 https。fetch(https://mywebsite.com/mydata.json);// Fetch 还有可选的第二个参数可以用来定制 HTTP 请求一些参数fetch(https://mywebsite.com/endpoint/, {method: POST,headers: {Accept: application/json,Content-Type: application/json, // 数据的格式(取决于服务器端)},body: JSON.stringify({firstParam: yourValue,secondParam: yourOtherValue,}),}); React Native笔记
React NativeRN采用JavaScript编写应用逻辑利用React框架构建UI。在运行时RN通过桥接机制将JavaScript代码与原生平台代码进行通信。对于iOS和AndroidRN分别有对应的原生渲染引擎。在iOS上它利用iOS的原生UI组件和API在Android上则使用Android的原生UI组件和API。这样RN代码在不同平台上可以调用各自平台的原生能力实现界面渲染和功能交互。当开发者编写一个按钮组件时RN会根据当前运行的平台将这个按钮渲染为iOS风格或Android风格的原生按钮。这一过程中RN的桥接机制起到关键作用它负责将JavaScript层的指令传递给原生层同时将原生层的事件和数据反馈给JavaScript层。React Native UI 组件Android 原生视图iOS 原生视图Web 标签说明ViewViewGroupUIViewA non-scrollingdiv不支持滚动支持flexbox、触摸处理和无障碍性控件的容器TextTextViewUITextViewp显示、样式和嵌套文本字符串甚至处理触摸事件ImageImageViewUIImageViewimg显示不同类型的图片ScrollViewScrollViewUIScrollViewdiv一个通用的滚动容器可以包含多个组件和视图,适合用来显示数量不多的滚动元素立即渲染所有元素TextInputEditTextUITextFieldinput typetext使用户可以输入文本FlatList显示较长的滚动列表,性能更好垂直的滚动列表其中的元素之间结构近似而仅数据不同FlatList并不立即渲染所有元素而是优先渲染屏幕上可见的元素SectionList可以分组的listReact基础components 组件、JSX、props 属性、state 状态Function Compomentsimport React from react;import { Text } from react-native;const Cat () {// 这个函数的返回值就会被渲染为一个 React 元素return (TextHello, I am your cat!/Text);}// 使用了export default语句来导出这个组件以使其可以在其他地方引入使用export default Cat;Class Compomentsimport React, { Component } from react;import { Text } from react-native;// 定义组件首先要继承(extends)自Componentclass Cat extends Component {// Class 组件必须有一个render()函数它的返回值会被渲染为一个 React 元素render() {return (TextHello, I am your cat!/Text);}}export default Cat;JSX: JavaScript XML一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖也是react.js的使用基础。React在不使用JSX的情况下一样可以工作然而使用JSX可以提高组件的可读性// 使用JSrender:function (){return React.createElement(div, {className: divider},Label Text,React.createElement(hr));}// 使用JSXrender:function (){return div classNamedividerLabbel Texthr//div}在 React Native 0.71 版本之前JSX 语法糖的实质是调用React.createElement方法所以你必须在文件头部引用import React from react。但在 React Native 0.71 版本之后官方引入了新的 JSX 转换可以不用再在文件头部写import React from react。Props是“properties”属性的简写。Props 使得我们可以定制组件import React from react;import { Text, View } from react-native;const Cat (props) {return (ViewTextHello, I am {props.name}!/Text/View);}const Cafe () {return (ViewCat nameMaru /Cat nameJellylorum /Cat nameSpot //View);}export default Cafe;State 状态如果把 props 理解为定制组件渲染的参数 那么state就像是组件的私人数据记录。状态用于记录那些随时间或者用户交互而变化的数据。Function Componentsimport React, { useState } from react;import { Button, Text, View } from react-native;const Cat (props) {const [isHungry, setIsHungry] useState(true);return (ViewTextI am {props.name}, and I am {isHungry ? hungry : full}!/TextButtononPress{() {setIsHungry(false);}}disabled{!isHungry}title{isHungry ? Pour me some milk, please! : Thank you!}//View);}const Cafe () {return (Cat nameMunkustrap /Cat nameSpot //);}export default Cafe;Class Componentsimport React, { Component } from react;import { Button, Text, View } from react-native;class Cat extends Component {state { isHungry: true };render() {return (ViewTextI am {this.props.name}, and I am{this.state.isHungry ? hungry : full}!/TextButtononPress{() {this.setState({ isHungry: false });}}disabled{!this.state.isHungry}title{this.state.isHungry ? Pour me some milk, please! : Thank you!}//View);}}class Cafe extends Component {render() {return (Cat nameMunkustrap /Cat nameSpot //);}}export default Cafe;Platform 模块React Native 提供了一个检测当前运行平台的模块Platform.OS在 iOS 上会返回ios而在 Android 设备或模拟器上则会返回androidPlatform.select()它可以以 Platform.OS 为 key从传入的对象中返回对应平台的值import {Platform, StyleSheet} from react-native;const styles StyleSheet.create({height: Platform.OS ios ? 200 : 100,});Platform.Version // Android 版本、iOS 版本特定平台后缀当不同平台的代码逻辑较为复杂时最好是放到不同的文件里这时候我们可以使用特定平台后缀。React Native 会检测某个文件是否具有.ios.或是.android.的后缀然后根据当前运行的平台自动加载正确对应的文件。BigButton.ios.jsBigButton.android.jsimport BigButton from ./BigButton; // 去掉平台后缀直接引用Style:要求使用了驼峰命名法,后声明的属性会覆盖先声明的同名属性import React from react;import { StyleSheet, Text, View } from react-native;const LotsOfStyles () {return (View style{styles.container}Text style{styles.red}just red/TextText style{styles.bigBlue}just bigBlue/TextText style{[styles.bigBlue, styles.red]}bigBlue, then red/TextText style{[styles.red, styles.bigBlue]}red, then bigBlue/Text/View);};const styles StyleSheet.create({container: {marginTop: 50,},bigBlue: {color: blue,fontWeight: bold,fontSize: 30,},red: {color: red,},});export default LotsOfStyles;React Native 中的尺寸都是无单位的表示的是与设备像素密度无关的逻辑像素点在不同尺寸的屏幕上都显示成一样的大小百分比宽高要求父容器有一个明确的尺寸。Image标签src属性改为source不接受字符串是一个带有uri属性的对象Image source{{uri: https://facebook.github.io/react/logo-og.png}}style{{width: 400, height: 400}} /URI 是统一资源标识符URL 是统一资源定位符。URL 是 URI 的子集所有 URL 都是 URI但不是所有 URI 都是 URL。URI 身份证号标识你是谁 URL 家庭住址告诉你去哪找你需要手动指定图片的尺寸、需要使用 https 以满足 iOSApp Transport Security的要求在浏览器中不给图片指定尺寸浏览器会先渲染一个 0x0 大小的元素占位然后下载图片在下载完成后再基于正确的尺寸来渲染图片抖动。在React Native中我们有意避免了这一行为。开发者需要做更多工作来提前知晓远程图片的尺寸或宽高比读取本地静态图片使用require(./my-icon.png)语法则无需指定尺寸因为它们的尺寸在加载时就可以立刻知道。比如require(./my-icon.png)的实际输出结果可能是{__packager_asset:true,uri:my-icon.png,width:591,height:573}Hooks是 React 16.8 引入的新特性让你在函数组件中使用状态和生命周期等 React 特性1.为什么需要hooks// ❌ 类组件- 以前的方式class Counter extends React.Component {state { count: 0 };componentDidMount() {document.title 点击了 ${this.state.count} 次;}render() {return (button onClick{() this.setState({ count: this.state.count 1 })}点击次数: {this.state.count}/button);}}// ✅ 函数组件 Hooks - 现在的方式const Counter () {const [count, setCount] useState(0);useEffect(() {document.title 点击了 ${count} 次;}, [count]);return (button onClick{() setCount(count 1)}点击次数: {count}/button);};2.hooks解决的问题问题说明类组件复杂this 指向混乱、生命周期方法分散逻辑复用难以前需要高阶组件、render props代码冗余相关逻辑被迫拆分到不同生命周期难以理解类组件的学习曲线较陡3.常见的hooks基础Hook作用示例useState状态管理const [count, setCount] useState(0)useEffect副作用处理useEffect(() { ... }, [])useContext跨组件共享状态const value useContext(MyContext)额外Hook作用useRef引用 DOM 或保存值useMemo缓存计算结果useCallback缓存函数引用useReducer复杂状态管理useLayoutEffectDOM 更新后同步执行1.useState - 状态管理const [count, setCount] useState(0);setCount(1); // 直接设置2. useEffect - 副作用处理// 挂载时执行一次useEffect(() {fetchData();}, []);// 依赖变化时执行useEffect(() {fetchUser(userId);}, [userId]);3. useRef - 引用// 引用 DOMconst inputRef useRefHTMLInputElement(null);input ref{inputRef} /inputRef.current?.focus();// 保存值不触发渲染const countRef useRef(0);countRef.current countRef.current 1;4.useMemo - 缓存计算结果/ 仅当依赖变化时重新计算const expensiveValue useMemo(() { return computeExpensiveValue(a, b); }, [a, b]);5.useCallback - 缓存函数// 仅当依赖变化时重新创建函数 const handleClick useCallback(() { doSomething(a, b); }, [a, b]);fetch: React Native 提供了和 web 标准一致的Fetch API用于满足开发者访问网络的需求, Chrome 调试目前无法观测到 React Native 中的网络请求可使用第三方的react-native-debugger来进行观测。默认情况下iOS 会阻止所有 http 的请求 Android9 开始也会默认阻止 http 请求以督促开发者使用 https。fetch(https://mywebsite.com/mydata.json);// Fetch 还有可选的第二个参数可以用来定制 HTTP 请求一些参数fetch(https://mywebsite.com/endpoint/, {method: POST,headers: {Accept: application/json,Content-Type: application/json, // 数据的格式(取决于服务器端)},body: JSON.stringify({firstParam: yourValue,secondParam: yourOtherValue,}),});