RN6_REACT(react native 学习)_iOS开发_动态网站制作指南
RN6_REACT(react native 学习)
来源：人气：30
参考：/blog/2015/03/react.html
使用React的网页：
&!DOCTYPE html&
&&& &scrtsrc=&../build/react.js&&&/script&
&&& &scriptsrc=&../build/react-dom.js&&&/script&
&&& &scriptsrc=&../build/browser.min.js&&&/script&
&&& &divid=&example&&&/div&
&&& &scripttype=&text/babel&&
&&&& &// ** Our code goes here! **
&&& &/script&
代码分析：
1、&&script&&标签的&type&属性为&text/babel&。这是因为
React 独有的 JSX 语法，跟Script 不兼容。凡是使用 JSX的地方，都要加上&type=&text/babel&&。
2、代码一共用了三个库：&react.js&、react-dom.js&和&Browser.js&，它们必须首先加载。
l& react.js&是 React 的核心库。
l& react-dom.js&是提供与 DOM 相关的功能。
l& Browser.js&的作用是将 JSX 语法转为
语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
ReactDOM.render()
ReactDOM.render(
& &h1&Hello, world!&/h1&,
&document.getElementById('example')
代码分析：
1、ReactDOM.render 是 React 的最基本方法，用于将转为 HTML 语言，并插入指定的 DOM 节点。
他让：HTML 语言直接写在JavaScript 语言之中，不加任何引号。它允许 HTML 与 JavaScript 的混写。
简单使用：
var names =['Alice', 'Emily', 'Kate'];
ReactDOM.render(
&&& names.map(function(name){
&&&&& return &div&Hello,{name}!&/div&
& document.getElementById('example')
JSX 的基本语法规则：遇到 HTML 标签（以&&&开头），就用HTML规则解析；遇到代码块（以&{&开头），就用JavaScript规则解析。
JSX允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员
var arr =[
& &h1&Hello world!&/h1&,
& &h2&React is awesome&/h2&,
ReactDOM.render(
& &div&{arr}&/div&,
& document.getElementById('example')
If_else使用
JSX 中不能使用&if else&语句，但可以使用&conditional
(三元运算)&表达式来替代。
&h1&{i ==1
? 'True!' :'False'}&/h1&
React 推荐使用内联样式。我们可以使用&camelCase&语法来设置内联样式. React 会在指定元素数字后自动添加&px&。以下实例演示了为&h1&元素添加&myStyle&内联样式：
varmyStyle ={
fontSize: 100,
color: '#FF0000'};
ReactDOM.render(
&h1style ={myStyle}&菜鸟教程&/h1&,
document.getElementById('example'));
JSX 允许在模板中插入数组，数组会自动展开所有成员：
&h1&菜鸟教程&/h1&,
&h2&学的不仅是技术，更是梦想！&/h2&,];
ReactDOM.render(
&div&{arr}&/div&,
document.getElementById('example')
React 允许将代码封装成组件（component），然后像插入普通HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。
组件的基本使用
var HelloMessage
= React.createClass({
& render: function(){
&&& return &h1&Hello{this.ops.name}&/h1&;
ReactDOM.render(
& &HelloMessagename=&John&/&,
& document.getElementById('example')
1、 变量&HelloMessage&就是一个组件类。模板插入&&HelloMessage/&&时，会自动生成&HelloMessage&的一个实例（下文的&组件&都指组件类的实例）。
2、 所有组件类都必须有自己的&render&方法，用于输出组件。
3、 组件的用法与原生的HTML 标签完全一致，可以任意加入属性，比如&&HelloMessagename=&John&&&，就是&HelloMessage&组件加入一个&name&属性，值为&John。组件的属性可以在组件类的&this.props&对象上获取。
1、组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage
2、组件类只能包含一个顶层标签，否则也会报错
var HelloMessage
= React.createClass({
& render: function(){
&&&&& Hello {this.props.name}
&&&&& some text
3、class&属性需要写成&className&，for&属性需要写成&htmlFor。因为&class&和&for&是 JavaScript 的保留字。
组件的子节点
this.props.children&属性它表示组件的所有子节点。
varNotesList = 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
1、 NoteList&组件有两个&span&子节点，它们都可以通过&this.props.children&读取
React.Children&来处理&this.props.children&。我们可以用&React.Children.map&来遍历子节点，而不用担心&this.props.children&的数据类型是&undefined&还是&object
1、this.props.children&的值有三种可能：
l& 如果当前组件没有子节点，它就是&undefined&;
l& 如果有一个子节点，数据类型是&object&；
l& 如果有多个子节点，数据类型就是&array；
组件的属性类型验证
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。
var MyTitle= React.createClass({
&propTypes: {
&&& title: React.PropTypes.string.isRequired,
& render: function() {
&&&& return &h1& {this.props.title}&/h1&;
1、 Mytitle组件有一个title属性，
2、 PropTypes&告诉 React，这个&title&属性是必须的，而且它的值必须是字符串。（如果给数字如123就会报错）
我们也可以直接给默认值。
& title : 'Hello World'
更多验证器：
React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI&。
var LikeButton = React.createClass({
& getInitialState: function() {
&&& return {liked: false};
&handleClick: function(event)
&&& this.setState({liked: !this.state.liked});
& render: function() {
&&& var text = this.state.liked?'like'
: 'haven\'t liked';
&&& return (
&&&&& &p onClick={this.handleClick}&
&&&&&&&You {text} this. Click to toggle.
&&&&& &/p&
ReactDOM.render(
& &LikeButton /&,
&document.getElementById('example')
1、 LikeButton&组件，它的&getInitialState&方法用于定义初始状态。
2、 状态这个对象可以通过&this.state&属性读取。当用户点击组件，导致状态变化，this.setState&方法就修改状态值，每次修改以后，自动调用&this.render&方法，再次渲染组件。
this.props&和&this.state&都用于描述组件的特性，可能会产生混淆。
一个简单的区分方法是：
l& this.props&表示那些一旦定义，就不再改变的特性
l& this.state&是会随着用户互动而产生变化的特性。
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做&DOM
diff&，它可以极大提高网页的性能表现。
有时需要从组件获取真实 DOM 的节点，这时就要用到&ref&属性。
varMyComponent = 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')
1、组件&MyComponent&的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个&ref&属性，然后&this.refs.[refName]&就会返回这个真实的 DOM节点。
1、必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定&Click&事件的回调函数，确保了只有等到真实 DOM 发生&Click&事件之后，才会读取&this.refs.[refName]&属性
2、React 组件支持很多事件，除了&Click&事件以外，还有&KeyDown&、Copy、Scroll&等
表单是用户在表单填入的内容，属于用户跟组件的互动，所以不能用&this.props&读取
var Input = React.createClass({
&getInitialState: function() {
&&& return {value: 'Hello!'};
&handleChange: function(event)
&&& this.setState({value: event.target.value});
& render: function () {
&&& var value = this.state.value;
&&& return (
&&&&& &div&
&&&&&&& &input type=&text& value={value} onChange={this.handleChange}/&
&&&&&&& &p&{value}&/p&
&&&&& &/div&
ReactDOM.render(&Input/&, document.body);
1、文本输入框的值，不能用&this.props.value&读取。（是一个变动的值，所以用state）
2、定义一个&onChange&事件的回调函数，通过&event.target.value&读取用户输入的值（textarea&元素、select元素、radio元素都属于这种情况）
组件的生命周期分成三个状态：
l& Mounting：已插入真实 DOM
l& Updating：正在被重新渲染
l& Unmounting：已移出真实 DOM
两种处理函数
React 为每个状态都提供了两种处理函数：
l& will&函数在进入状态之前调用
l& did&函数在进入状态之后调用
三种状态共计五种处理函数：
l& componentWillMount()
l& componentDidMount()
l& componentWillUpdate(object nextProps, object nextState)
l& componentDidUpdate(object prevProps, object prevState)
l& componentWillUnmount()
两个特殊的状态的的处理：
l& componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
l& shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
var Hello = React.createClass({
&getInitialState: function ()
&&& return {
&&&&&opacity: 1.0
&componentDidMount: function ()
&&& this.timer = setInterval(function(){
&&&&& var opacity = this.state.opacity;
&&&&&opacity -= .05;
&&&&& if (opacity & 0.1){
&&&&&&&opacity = 1.0;
&&&&&this.setState({
&&&&&&&opacity: opacity
&&& }.bind(this), 100);
& render: function () {
&&& return (
&&&&& &div style={{opacity: this.state.opacity}}&
&&&&&&&Hello {this.props.name}
&&&&& &/div&
ReactDOM.render(
& &Hello name=&world&/&,
&document.body
在hello组件加载以后，通过&componentDidMount&方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
组件的style属性的设置方式也值得注意，不能写成style=&opacity:{this.state.opacity};&
而要写成style={{opacity: this.state.opacity}}。因为：&React组件样式是一个对象，所以第一重大括号表示这是
JavaScript 语法，第二重大括号表示样式对象
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以用&componentDidMount&方法设置 Ajax 请求，等到请求成功，再用&this.setState&方法重新渲染 UI&
var UserGist= React.createClass({
&getInitialState: function() {
&&& return {
&&&&&username: '',
&&&&&lastGistUrl: ''
&componentDidMount: function() {
&&& $.get(this.props.source,function(result){
&&&&& var lastGist = result[0];
&&&&& if (this.isMounted())
&&&&&&&this.setState({
&&&&&&&&&username:lastGist.owner.login,
&&&&&&&&&lastGistUrl:lastGist.html_url
&&&&&&& });
&&& }.bind(this));
& render: function() {
&&& return (
&&&&& &div&
&&&&&&& {this.state.username}'s last gist is
&&&&&&& &a href={this.state.lastGistUrl}&here&/a&.
&&&&& &/div&
ReactDOM.render(
& &UserGist source=&/users/octocat/gists&/&,
&document.body
上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。
我们甚至可以把一个Promise对象传入组件，
ReactDOM.render(
& &RepoList
promise={$.getJSON('/search/repositories?q=javascript&sort=stars')}
&document.body
优质网站模板react native声明组件的两种方式
react native声明组件的两种方式,其中componentWillMount和construtor的作用是一样，都是渲染页面之前做一些业务逻辑。
var ShopIndex = React.createClass({
componentWillMount:function(){
this.props.navComponent.setNavItems({
rightItem: {
component: (
style={[styles.navItem, {marginRight: 7}]}&
style={{width: 20, height: 20}} source={{uri: shareImg}}/&
event: function() {
this.props.navigator.push({
title: '购物车',
component: /&
}.bind(this)
render: function() {
style={styles.container}&
class ShopIndex extends Component{
constructor(props) {
super(props);
this.props.navComponent.setNavItems({
rightItem: {
component: (
style={[styles.navItem, {marginRight: 7}]}&
style={{width: 20, height: 20}} source={{uri: shareImg}}/&
event: function() {
this.props.navigator.push({
title: '购物车',
component: /&
}.bind(this)
render() {
style={styles.container}&
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？15:58:46 UTC
&Route name="app" path="/" handler={Index}&
&Route name="Articles" path="/articles" handler={Articles} &
name="Tags" path="/articles" handler={Tags} &
&Route name="Tag" path="/tags/:tagName" handler={ArticleItem} /&
&Tags&&Link to="Tag" param={{tagName: 1}}&&Link to="Tag" param={{tagName: 2}}&&/Tags&
在 Tags 中点击 a 标签，的
componentWillMount 只有第一次会被点击的时候会被触发，其他点击都不会被触发。
类似于上图这种两个模块，点击上面区域中的 a 标签， 下面的模块的内容切换；
当嵌套的层级为两层的时候，是没有任何问题的。
但是我最上面还有一个导航，嵌套了三级之后就不行了。
这是什么原因？？
02:36:49 UTC
name="Tags" 那个，应该用 DefaultRoute 吧?
02:55:00 UTC
DefaultRoute 不能再嵌套层级了
09:19:15 UTC
不确定是不是这个.. 记得 react-router 更新以后, 切换路由会重用 DOM 来提高性能, 之前是有个选项的..现在需要在 Router 还是哪儿加上一个 id, 强制重新渲染, 那么 didMout 之类的事件就能被触发了..
If you would rather force route handlers to re-mount when transitioning between dynamic segments, you can assign a unique key to your route handler component to bypass this optimization:
09:28:34 UTC
是的 这种情况应该在componentWillReceiveProps 中加上对应的处理
10:04:42 UTC
componentWillReceiveProps
我是在 & RouteHandler & 中加了一个 key 来做的。React Native setState(…) warning with both componentWillMount and componentDidMount - Stack Overflow
Join the Stack Overflow Community
Stack Overflow is a community of 7.1 million programmers, just like you, helping each other.
J it only takes a minute:
I'm starting with react-native and in my project I got to a point where everything works but there's this warning:
Warning: setState(...): Can only update a mounted or mounting component.
So, I've looked several QA, tried a few solutions(changing the setState() call from componentWillMount and componentDidMount) but... the warning is always there.
Here is part of the code:
REQUEST_URL = 'http://url/users.php';
module.exports = React.createClass({
getInitialState: function() {
uid: null,
bid: null,
username: null,
componentDidMount: function() {
this.fetchData();
fetchData: function() {
fetch(REQUEST_URL)
.then( (response) =& response.json() )
.then( (json) =& {
console.log('setState called');
this.setState({
uid: json.users[0].user_id,
bid: json.users[0].building_id,
username: json.users[0].username
render: function() {
if (!this.state.uid) { //user is not defined
console.log('not rendered');
return &Text&chargement...&/Text&
console.log('rendered');
var userId = this.state.
var buildingId = this.state.
var username = this.state.
&View style={styles.content}&
&Text style={styles.label}&User Id&/Text&
&Text&{userId}&/Text&
&Text style={styles.label}&Building Id&/Text&
&Text&{buildingId}&/Text&
&Text style={styles.label}&Username&/Text&
&Text&{username}&/Text&
The users.php returns a json content-type.
Any clues?
The problem may be that react re-mounts certain components multiple times in one render (think that has something to do with the representation of initial values, could not find the question here), therefore your state would be set to a component that is not mounted.
If you set your state in a decoupled timeout that can be cleared when the component unmounts, you avoid setting state on a unmounted component.
componentDidMount() {
this.mounted =
// this.fetchTimeout = setTimeout(()=&{
this.fetchData();
componentWillUnmount() {
// clearTimeouts(this.fetchTimeout);
this.mounted =
fetchData() {
fetch(REQUEST_URL)
.then( (response) =& response.json() )
.then( (json) =& {
console.log('setState called');
if (this.mounted === true){
this.setState({
uid: json.users[0].user_id,
bid: json.users[0].building_id,
username: json.users[0].username
I still don't know if we are supposed to use TimerMixins but this way works without those.
(TimerMixins take care of clearing any timeout or interval set in the component)
EDIT: update sample to only call setState of the component is still mounted.
I do not know if there is a better way, but as far as I know until now you can not cancel a fetch request.
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
rev .25897
Stack Overflow works best with JavaScript enabled