谈谈从0开始快速学习React Native(一)
2016-12-23 本文已影响269人
亓凡
React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。
我可以说是从0开始学习React Native，之前学习的人少，自己也走了不少弯路，以后能把自己的一些想法或者是学习方法写出来分享一下，让后来学习的同行们少走一些弯路。（最好先学习一下reactjs）
自己理解的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官网下载这些库，也可以将其下载到本地去使用。
-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 节点。
```html
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
上述代码的作用是将<h1>Hello, world!</h1>插入到元素id为example的容器中。
JSX 和 HTMLJSX 是一个看起来很像 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.map或React.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 是会随着用户互动而产生变化的特性。
