谈谈从0开始快速学习React Native(一)

原创 2016年08月30日 17:32:17

React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。
我可以说是从0开始学习React Native,之前学习的人少,自己也走了不少弯路,以后能把自己的一些想法或者是学习方法写出来分享一下,让后来学习的同行们少走一些弯路。

自己理解的React

1.React?
2.React的特点
3.JSX语法
4.组件(Component)
5.组件的属性、状态

什么是React?

React是一个用于组建用户界面的JavaScript库,让你更加简单的方式来创建交互式用户界面。
个人认为的优点吧:
1.React就是由许多个组件来组合而成的。
2.数据改变的时候,React能高效的更新和渲染更新的组件。
3.声明性视图让你的代码容易调试,自己能预测出效果
4.封装管理自己的状态组件,将他们组成复杂的界面。
5.由于组件逻辑是用JavaScript编写的,可以轻松地通过程序传递大量数据,并保持DOM状态。
6.一次学习随时随地可以编写,学会了React,不仅可以轻松的开发web,也可以用于React Native来开发Android+ios应用。

开始学习React

使用React之前需要在[React官网](https://facebook.github.io/react/downloads.html)下载这些库,也可以将其下载到本地去使用。 
-react.js
-react-dom.js
-browser.min.js
上面一共列举了三个库: react.js 、react-dom.js 和 browser.min.js ,它们必须首先加载。

react.js是React的核心库
react-dom.js是提供与DOM相关的功能
browser.min.js的作用是将JSX语法转为JavaScript语法
这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。  

注意:我们实际在做React Native开发时,这些库作为React Native核心库已经被初始化在node_modules目录下,所以不需要单独下载。

使用React写出我们非常熟悉的Hello World

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

在 JavaScript 代码里写着 XML 格式的代码称为 JSX,下文会介绍。为了把 JSX 转成标准的 JavaScript,我们用<script type="text/babel">标签,然后通过Babel转换成在浏览器中真正执行的内容。

注意:
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

上述代码的作用是将<h1>Hello, world!</h1>插入到元素id为example的容器中。

JSX 和 HTML

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
每一个XML标签都会被JSX转换工具转换成纯JavaScript代码,使用JSX,组件的结构和组件之间的关系看上去更加清晰。
JSX并不是React必须使用的,但React官方建议我们使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。

React.render(//使用JSX
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,
    document.getElementById('example')
); 
React.render(//不使用JSX
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'content')
        )
    ),
    document.getElementById('example')
);

HTML标签 与 React组件 对比

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

注意:
- React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
- 由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代, React DOM 使用 className 和 htmlFor 来做对应的属性。

JavaScript 表达式

属性表达式

要使用 JavaScript 表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 (“”)。

// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出 (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

子节点表达式

同样地,JavaScript 表达式可用于描述子结点:

// 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 输出 (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

React中注释

JSX 里添加注释很容易;它们是 JS 表达式。需要在一个标签的子节点内(非最外层)用 {} 包围要注释的部分。

class ReactDemo extends Component {
  render() {
    return (     
      <View style={styles.container}>
        {/*标签子节点的注释*/}
        <Text style={styles.welcome}
          //textAlign='right'
          textShadowColor='yellow'
          /*color='red'
          textShadowRadius='1'*/
          >
          React Native!
        </Text>
      </View>
    );
  }
}

注意:
在标签内要使用{/*注释的内容*/}
在标签节点以外注释,和通常的注释是一样的,多行用/*多行注释的内容*/ 单行用//单行注释的内容

修改组件的属性,会导致React不会对组件的属性类型(propTypes)进行的检查。从而引发一些预料之外的问题。

两种写法都能实现
不推荐的:

  var component = <Component />;
  component.props.foo = x;
  component.props.bar = y; 

推荐做法:

var component = <Component foo={x} bar={y} />;

Component

React 允许将代码封装成组件(Component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
ReactDOM.render(
  <HelloMessage name="MrQ" />,
  document.getElementById('example')
);

上面代码中,变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage />时,会自动生成 HelloMessage 的一个实例。所有组件类都必须有自己的 render 方法,用于输出组件。

注意

  • 组件类的第一个字母必须大写。
  • 组件类只能包含一个顶层标签(在开发React Native中一般是用View最外层的进行包裹)。

组件的属性(props)

我们可以通过this.props.XXX的形式获取组件对象的属性,对象的属性可以任意定义,但要避免与JavaScript关键字冲突。

遍历对象的属性:

this.props.children会返回组件对象的所有属性。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.mapReact.Children.forEach 来遍历子节点。
React.Children.map

array React.Children.map(object children, function fn [, object thisArg])

该方法会返回一个数组。
React.Children.forEach

React.Children.forEach(object children, function fn [, object thisArg])
var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});
ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

PropTypes

组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。
组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求。

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。

var data = 123;
ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

这样一来,title属性就通不过验证了。控制台会显示一行错误信息。

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

更多的PropTypes设置,可以查看官方文档
此外,getDefaultProps 方法可以用来设置组件属性的默认值。

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
  <MyTitle />,
  document.body
);

上面代码会输出"Hello World"

ref 属性(获取真实的DOM节点)

组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。

但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input"         onClick={this.handleClick} />
      </div>
    );
  }
});
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

上面代码中,组件 MyComponent 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。

注意:ref属性在开发中使用频率很高,使用它你可以获取到任何你想要获取的组件的对象,有个这个对象你就可以灵活地做很多事情,比如:读写对象的变量,甚至调用对象的函数。

state

上文讲到了props,因为每个组件只会根据props 渲染了自己一次,props 是不可变的。为了实现交互,可以使用组件的 state 。this.state 是组件私有的,可以通过getInitialState()方法初始化,通过调用 this.setState() 来改变它。当 state 更新之后,组件就会重新渲染自己。
render() 方法依赖于 this.props 和 this.state ,框架会确保渲染出来的 UI 界面总是与输入( this.props 和 this.state )保持一致。

初始化state

通过getInitialState()方法初始化state,在组件的生命周期中仅执行一次,用于设置组件的初始化 state 。

 getInitialState:function(){
    return {favorite:false};
  }

更新 state

通过this.setState()方法来更新state,调用该方法后,React会重新渲染相关的UI。
this.setState({favorite:!this.state.favorite});

var FavoriteButton=React.createClass({
  getInitialState:function(){
    return {favorite:false};
  },
  handleClick:function(event){
    this.setState({favorite:!this.state.favorite});
  },
  render:function(){
    var text=this.state.favorite? 'favorite':'un favorite';
    return (
      <div type='button' onClick={this.handleClick}>
         {text} 
      </div>
    );
  }
});

上面代码是一个 FavoriteButton 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

注意:由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

版权声明:本文为博主原创文章,未经博主允许不得转载。

谈谈从0开始快速学习React Native(二)

React Native生命周期各个函数的介绍:getDefaultProps:在组件创建之前,会先调用 getDefaultProps() ,这是全局调用一次,严格地来说,这不是组件的生命周期的一部...
  • qizhenshuai
  • qizhenshuai
  • 2016年08月31日 15:26
  • 252

react-native学习路线总结

本人新手web前端程序员一枚,应公司要求学习react-native框架,作为博客萌新来讲讲我这一个月学习历程,新人和前端的朋友们可以一看,其他都可看,反正不用你掏钱啊。 首先当然还是介绍一下rea...
  • u014168594
  • u014168594
  • 2016年09月21日 17:23
  • 6484

ReactNative从学习到放弃——准备工作

ReactNative是Facebook刚出的一个可以跨平台(Android和ios)开发的控件,现在非常流行,虽然还有很多坑,不过学习一下应用到项目中某些模块还是很不错的。所以我这个小菜鸟就准备学习...
  • zjm0518
  • zjm0518
  • 2016年08月05日 19:11
  • 942

移动客户端开发快速上手ReactNative的学习路线

1. HTML(学习时间30分钟): 或多或少,大家肯定对HTML还是有所了解的,在开始前端之旅前,有必要系统的扫一下基础,推荐教程:http://www.jb51.net/shouce/htm...
  • JoeySheng
  • JoeySheng
  • 2016年07月15日 15:24
  • 1367

Android开发学习之路--React-Native之初体验

近段时间业余在学node.js,租了个阿里云准备搭建后端,想用node.js,偶尔得知react-native可以在不同平台跑,js在iOS和android上都可以运行ok,今天就简单学习下react...
  • eastmoon502136
  • eastmoon502136
  • 2016年05月08日 19:58
  • 5125

React Native学习笔记(二)JSX 语法学习

1.什么是JSX JSX并不是一门新的语言,而仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法。实际上,每个HTML标签最终转化为了JavaScript代码来运行。 React的...
  • weimeng809
  • weimeng809
  • 2016年05月22日 23:08
  • 2394

React-native 基本语法一

React-native基本语法
  • shuang__zi
  • shuang__zi
  • 2016年12月30日 16:27
  • 1657

React Native 开发即时预览与分享工具

React Native 的社区发展以及在移动开发领域的火热,大大提高了我们学习和实践的热情,不过目前的开发调试模式依然是一边开着模拟器一边编码,模拟器开启「即时刷新」进行可视化调试。 最近 Exp...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月18日 12:44
  • 3449

为React Native开发写的JS和React入门知识

来自Leo的原创博客,转载请著名出处我的stackoverflow前言 想来想去,还是需要写一篇文章来介绍下JavaScript和React的基本知识。最初开发ReactNative的时候,完全没...
  • Hello_Hwc
  • Hello_Hwc
  • 2016年04月20日 16:22
  • 23859

React Native商城项目实战15 - 首页购物中心

1.公共的标题栏组件TitleCommonCell.js/** * Sample React Native App * https://github.com/facebook/react-nati...
  • github_26672553
  • github_26672553
  • 2016年08月26日 10:03
  • 2962
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:谈谈从0开始快速学习React Native(一)
举报原因:
原因补充:

(最多只允许输入30个字)