如何使用服务端渲染加速React APP首屏加载

发布网友发布时间：2022-04-27 00:59

共1个回答

热心网友时间：2022-04-18 01:53

本着什么都要搀和的原则，一起来看看React Native是如何开发iOS APP。
围观本文需自备Mac OSX ， XCode ， node 以及 npm 。
做好准备之后，打开你的终端（或其他命令行利器），键入下面命令：
npm install -g react-native-cli

和
react-native init AwesomeProject

此时，我们会看到一个名为AwesomeProject的文件夹，这就是工程文件的位置。使用XCode打开AwesomeProject.xcodeproj，并点击RUN，会看到iOS模拟器以及此项目对应的内容。

如果想要修改显示内容，请打开index.ios.js，里面是一堆Javascript模样的东西。修改之后，在iOS模拟器中cmd+R就可以看到修改后的效果。
接下来，我们按照教程，来展示一张电影海报，为了方便，我们直接修改index.ios.js。
一、模拟数据
在var React = require('react-native');后面，我们先模拟一下海报所需要的数据：
var MOCKED_MOVIES_DATA = [
{title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

二、渲染
我们需要展示电影的标题、年份以及缩略图，因此我们需要下面这些东西（看起来也不难理解）：
var {
AppRegistry,
Image,
StyleSheet,
Text,
View,
} = React;

下面，为了展示我们需要的内容，我们来修改一下render部分的内容。
render: function() {
var movie = MOCKED_MOVIES_DATA[0];
return (
<View style={styles.container}>
<Text>{movie.title}</Text>
<Text>{movie.year}</Text>
<Image source={{uri: movie.posters.thumbnail}} />
</View>
)
}

最直观的感受，就像是我们在Javascript代码中写了HTML代码，<View>看起来类似于<div>。（此时在iOS模拟器中cmd+R可以看到不带样式的效果）
接下来，我们为渲染出来的数据添加样式：
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail: {
width: 53,
height: 81,
},
});

我们可以使用flex来进行布局，看起来是个好消息。
在这时候，教程说，海报图片（<Image>）还没有添加样式，我们找到<Image source={{uri: movie.posters.thumbnail}} />，添加上style={styles.thumbnail}也就是变成下面的样子：
<Image
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
/>

此时在模拟器中cmd+R，可以看到效果。