JSX
官方入门
中文入门
官方文档中文翻译
JSX主要是引入了一种新的变量类型, 官方就叫jsx类型, 或者element. 这是长得和html差不多的html模板(嗯, Vue比jsx高明的地方就是, vue真的就是html模板,而jsx只是长得像而已)
下面说明两者差异,以及模板内嵌变量的用法
类型|JSX|HTML/vue|比较
--|--
尖括号tag|<></>| |一样的
属性名称|首字母小写的驼峰式|全小写羊肉串式|不一样
模板|< {}>{}</>|跟Vue比,Vue是双花括号{{}}|不一样
除了属性名称写法不同,还有些字母组成也不同
JSX|HTML
--|--
className|class
jsx类型换行的话,需要用小括号()括起来.
下面是个完整演示
const h1Class = 'greeting'
const element = (
<h1 className={h1Class}>
Hello, world!
</h1>
);
const element2 = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
还可以用构造器生成element
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
有三种构造器, React.createClass 、React.createElement、Component的区别
Android
- adb无法启动: 5037端口占用
可以增加一个系统变量 ANDROID_ADB_SERVER_PORT, 值是1~65535重新选个端口, 比如60000
- 使用夜神模拟器?
先要建立好项目并且编译好apk, 建议看官方文档中文翻译
启动后,还是要在夜神中打开开发者模式和USB调试选项.
然后使用adb connect 127.0.0.1:62001连接到夜神模拟器
将项目下android\app\build\outputs\apk\debugapp-debug.apk手动安装到夜神模拟器,然后打开
使用adb shell input keyevent 82打开app中的debug菜单
进入Settings -> Debug server host for device, 设置为电脑的ip端口,如192.168.0.38:8081, 8081是默认端口
RN
RN中文网
下面这个例子演示了:
class Blink extends Component {
// 声明state对象
state = { isShowingText: true };
componentDidMount() {
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState({
isShowingText: !this.state.isShowingText
});
}, 1000);
}
render() {
// 根据当前showText的值决定是否显示text内容
if (!this.state.isShowingText) {
return null;
}
return (
<Text>{this.props.text}</Text>
);
}
}
export default class BlinkApp extends Component {
render() {
return (
);
}
}