React Native 快速入门之认识Props和State
眼下React Native(以后简称RN)越来越火,我也要投入到学习当中。对于一个前端来说,还是有些难度。因为本人觉得这是一个App开发的领域,自然是不同。编写本文的时候,RN的版本为0.21.0。我们马上以代码进入今天的学习。
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native'; class Hello extends Component {
render() {
return (
<View>
<Text>{ this.props.title}</Text>
<Text>{ this.props.text}</Text>
</View>
);
}
}
class HelloComponent extends React.Component{
constructor (props) {
super(props);
this.state = {
appendText: ''
};
}
_setText() {
this.setState({appendText: ' Native!'});
}
render() {
return (
<View>
<Text onPress={this._setText.bind(this)}>
{this.props.text + this.state.appendText}
</Text>
</View>
);
}
}
class learn01 extends Component {
render() {
const pros = {
text: 'hi',
title: 'title'
}
return (
<View>
<View style={{height:30}} />
<Hello {...pros} />
<HelloComponent text="React"/>
</View>
);
}
}
简要分析:
- 所谓props,就是属性传递,而且是单向的。
- 属性多的时候,可以传递一个对象,语法为{...xx},这是es6的新特性。
- React靠一个state来维护状态,当state发生变化则更新DOM。
今天到此为止,下次见。
React Native 快速入门之认识Props和State的更多相关文章
- React Native小白入门学习路径——二
万万没想到,RN组仅剩的一个学长也走了,刚进实验室没几天就被告知这样的事情,一下子还真的有点接受不了,现在RN组就成了为一个没有前辈带的组了,以后学习就更得靠自己了吧.唉,看来得再努力一点了. 这一周 ...
- React Native基础&入门教程:初步使用Flexbox布局
在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...
- React Native小白入门学习路径——五
React Native小白入门学习路径--五 序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
- React Native 从入门到原理一
React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...
- React Native基础&入门教程:以一个To Do List小例子,看props和state
本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在上篇中,我们介绍了什么是Flexbox布局,以及如何使用Flexb ...
- 给所有开发者的React Native详细入门指南
建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...
- React Native开发入门
目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下Reac ...
- React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...
- React Native (一) 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.笔者 ...
随机推荐
- json 当集合类型的字符串变成集合时候 里面有map类型的转换操作
- bug:margin塌陷
margin塌陷:两个嵌套的div,内部div的margin-top失效,内部对于外部的div并没有产生一个margin值,而是外部的div相对于上面的div产生了一个margin值. 弥补方法: 1 ...
- 题解 P1628 【合并序列】
看到这个题,小金羊第一秒的反应就是: 优先队列可解! 看到楼上某同学一个个比较, find()函数是时候现身了! string//类型库 //find具体用法可以自行百度 //这里仅说这里的用法(逃) ...
- ORM框架SQLAlchemy使用学习
参考源:http://blog.csdn.net/fgf00/article/details/52949973 一.ORM介绍 如果写程序用pymysql和程序交互,那是不是要写原生sql语句.如果进 ...
- Unity3D手游开发日记(5) - 适合移动平台的植被随风摆动
一直在思考怎么让场景更有生机,我觉得植被的随风摆动是必不可少的.CE3引擎的植被bending就做得特别棒.我也准备在手机上做一套. 先分析一下植被摆动常见的几种做法.其实不管哪种做法,核心就是让植被 ...
- Mysql千万级大表优化策略
1.优化sql以及索引 1.1优化sql 1.有索引但未被用到的情况(不建议) (1)避免like的参数以通配符开头时 尽量避免Like的参数以通配符开头,否则数据库引擎会放弃使用索引而进行全表扫描. ...
- javascript基本介绍
javascript是一种广泛用于客户端web开发的脚本语言,常采用来给html网页添加动态功能,比如响应客户的各种操作. 脚本语言是什么? (1).脚本语言往往不能独立运行,它和html/jsp/p ...
- 用python + openpyxl处理excel(07+)文档 + 一些中文处理的技巧
sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&am ...
- Bootstrap 按钮下拉菜单
向下拉 <div class="dropdown"> <button class="btn btn-default" data-toggle= ...
- [Ctsc2014]企鹅QQ
3555: [Ctsc2014]企鹅QQ Time Limit: 20 Sec Memory Limit: 256 MB[Submit][Status][Discuss] Description P ...