UI显示流程:
Android:通过layout布局决定UI效果,其中样式文件与界面元素写在布局中更新的功能写在代码中
备注:真正的状态机制是只数据状态周期, 有传递性,也能因为数据改变了影响UI。在Android是没有这种设计的。
Reative Native:Virtual Dom 树。 Vue用于PC端,重绘整个Dom树,React Native避免了重新绘制DOM,通过DOM映射成原生空间显示在屏幕上。
总结:Reat是一个专注于UI部分框架,做UI架构很牛逼,毕竟会存在DOM与原生控件的映射,难免性能会有损耗,但是相对于html还是高出很多。
Flutter:基于dart描述的UI效果,直接通过Skia图像处理引擎渲染到界面。没有虚拟DOM,也没有原生映射,性能对于原生会高一些。(分有状态的、无状态的。)
总结:性能虽高,热重载技术,设计架构也都是Google出产。
Android没法实现热重载:
.java文件 ————.class文件 —————.dex文件---------生成apk —————安装到手机
Java文件编译成Class, 然后被dex工具编译成dex,最终打包成APK文件,随后通过adb命令装到手机中Java文件发生变化,上述流程需要重新来一遍,安装到手机中,才能看到效果
Class加载过程:懒加载,是不支持热更新的最根本原因。
RN的编译流程:
JS文件————react-native jar包------消息队列--------diff算法检测到UI差异———DOM树更新------重新渲染
Flutter编译流程:
.dart文件--------react-native jar包-------Skia图像处理引擎--------引擎直接加载Dart描述的UI-------重新渲染
-
万物皆组件:render()方法
初始化 、 getDefaultProps、 getInitState、componentWillMount(onCreate)、render、 componentDidmount
不会卡顿:把渲染分发到每一个组件中去了。
export default class App extends Component<Props> { constructor(props) { super(props); this.state = {}; console.log("0 constructor") } componentWillMount(){ console.log("1 componentWillMount") } componentDidMount(){ console.log("2 componentDidMount") } shouldComponentUpdate(nextProps, nextState) { console.log("3 componentDidMount") return true } componentWillReceiveProps(nextProps) { console.log("4 componentWillReceiveProps") } componentWillUnmount() { console.log("5 componentWillUnmount") } componentWillUpdate(){ console.log("6 componentWillUpdate") } componentDidUpdate() { console.log("7 componentDidUpdate") } render() { return ( <View style={styles.container}> <Text style={styles.welcome}>Welcome to React Native!</Text> <Text style={styles.instructions}>To get started, edit App.js</Text> <Text style={styles.instructions}>{instructions}</Text> </View> ); } } 复制代码
2、封装对象(component)、样式(styles)
运行时:杀掉node进程。
props:初始属性(数据)不可改变 (rn 入口 父组件、 影响当前Props)
传递数据而生
state:内置对象,不能直接给它赋值。核心,当前组件相关,数据状态集合。
数据 + 控件。
状态包含 props、state状态。
Flex布局
Flex布局:概念弹性盒子布局,优势
主轴, 交叉轴。row, clumon;
flex-direction: column, row, row-reverse, column-reverse
flex:1(权重,占比)
justfyContent:flex-start, center, flex-end, space-around, space-between (类似于layout_gravity)
alignments:
语法
箭头函数,内部类啥都没有,this不表示 内部类,而是表示外部的Class。
开发RN时,箭头函数不要写 function()=>{
}
props使用
父组件对子组件进行传递,弱类型语言:
react ———》运行 字符串——》number
props 作为一个变量 对象
export default class PropsTest extends Component{
constructor(props) {
super(props);
this.state = {};
}
static defaultProps={
name:"Tina"
}
static propTypes={
name:PropTypes.string,
age:PropTypes.number,
sex:PropTypes.string.isRequired
}
render(){
return(<View>
<Text>姓名:{this.props.name}</Text>
<Text>age: {this.props.age}</Text>
<Text>sex: {this.props.sex}</Text>
</View>)
}
}
export default class PropsTest extends Component{
constructor(props) {
super(props);
this.state = {};
}
static defaultProps={
name:"Tina"
}
static propTypes={
name:PropTypes.string,
age:PropTypes.number,
sex:PropTypes.string.isRequired
}
render(){
return(<View>
<Text>姓名:{this.props.name}</Text>
<Text>age: {this.props.age}</Text>
<Text>sex: {this.props.sex}</Text>
</View>)
}
}
复制代码
ref详解
类似于Android中的findViewByid机制
react-navigation
安装navigation
tab-navigator
官方并没有 TabBar
,我们使用一个第三方 react-native-tab-navigator
在项目根目录执行命令
npm install react-native-tab-navigator --save
复制代码
安装完成后在 App.js
加入 TabNavigator
:
导入navigation 库后一直出错,原来是看的旧版的中文文档,看英文文档修正:
reactnavigation.org/docs/en/get…
yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler
复制代码
然后再link
react-native link react-native-gesture-handler
复制代码
Navigation的跳转
this.props.navigation.navigate('RouteName')
this.props.navigation.push('Home')
this.props.navigation.goback()
复制代码
TabNavigator:
import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from "react-navigation";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Details Screen</Text>
<Button style={styles.btn}
title="Go to Details... again"
onPress={() => this.props.navigation.push('Details')}
/>
<Button style={styles.btn}
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
<Button style={styles.btn}
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Setting Screen</Text>
<Button
title="Go to ProfileScreen"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
class ProfileScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Details Screen</Text>
<Button style={styles.btn}
title="Go to ProfileScreen...again"
onPress={() => this.props.navigation.push('Details')}
/>
</View>
);
}
}
const HomeStack = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen
},{
initialRouteName:"Home"
});
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
Profile: ProfileScreen,
});
const TabNavigator = createBottomTabNavigator(
{
Home: HomeStack,
Settings: SettingsStack,
}
);
const AppContainer = createAppContainer(TabNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
const styles = StyleSheet.create({
btn:{
marginTop:20,
margin:50
}
})
复制代码