开个贴，学习React Native
现在有各种各样的web-native解决方案，是时候找到一个合适的,facebook发布的React Native ，现在好像被挺多团队推崇的，包括天猫，百度等(小道传闻~),so，学习吧，既然眼观没有其他人独到，不如站在巨人肩膀上~
React 入门
首先我们要熟悉使用React，我理解为像是jQuery那样的JavaScript框架，说道JavaScript，许多人都把他跟jave相联系。。也是醉了~
在教程上我选择阮一峰的 React 入门实例教程 ，React 起始于facebook团队，据说他们不满足于现在流传的JavaScript框架，所以自己研发了React 这套框架，想想真是6啊~React在13年5月开源，代码逻辑简单，运行也流畅，性能出众，所以备受推崇。
未解决：将JSX 代码 转换为 JavaScript，该放到后台，可是命令行没有操作成功，没有安装成功 babel
安装
React可以去官网下载安装，也可以git clone下来，
$ git clone git@github.com:ruanyf/react-demos.git这里面有很多react的demo，里面已经自带了react 的源码。我的git key 好像出错了，所以一直不成，所以我用的https协议的 https://github.com/ruanyf/react-demos，使用sourcetree clone 的。
使用react 的html 源码：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>首先必须加载react.js react-dom.js browser.min.js 这三个js文件，其中，react.js 为react 的核心库，react-dom.js提供了与dom相关的东西，browser.min.js 将react使用的JSX语法转换为javascript语法，说到这，请注意上面<script type="text/bablel"> 这句话，通常我们html里引用JavaScript语句，都是用<script type="text/javascript">,这个区别是因为react是使用JSX语法的~跟JavaScript并不兼容，所以需要注意。当将JSX语法转换为JavaScript语法时，特别消耗资源，所以一般放在服务器使用，因为还没有开始服务器学习，暂时把他放在本地。。
如何引用外部的js文件：<script type = "text/babel" src="js file path">
至此，我们就可以使用React来写一个hello world 了~
ReactDOM.render()
React.DOM.render() 是React中最基本的用法，用来将模板转换为HTML语言，并插入相应的DOM节点
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);上面的代码将<h1>Hello, world!</h1> 这个节点，插入到了example节点中。需要强调，React识别大小写，本人写成ReactDom，结果出错
JSX语法
JSX 语法与 JavaScript 语法不同，比如HTML的代码可以直接写入，而不用加单引号，他支持HTML与JavaScript的混写。
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);JSX 当遇到 < 号时，认定接下来为HTML语言，遇到 { 号时，认定为JavaScript语言。JSX 允许直接在模板中插入JavaScript变量，假如变量是一个数组，则会将其在HTML中展开：
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);离线翻译
将JSX文件翻译成JavaScript：
首先需要安装Babel
npm install --global babel-cli
npm install babel-preset-react然后使用Babel转换文件
babel --presets react src --watch --out-dir build组件
React可以将代码封装成组件，以后的时候可以直接使用，使用React.createClass() 生成一个组件
var CommentBox = React.createClass({
displayName:'CommentBox',
render: function () {
return (
React.createElement('div',{className:"commentBox"},"hello,I am a Comment Box")
)
}
});需要注意，每个class里面都需要有一个render方法，可以理解为填充这个class，即组件，上面的代码填充了一个div
React.createElement() 这个函数有三个参数，分别为节点类型，即html类型，config，即参数，子节点，即节点里面的东东
下面我们就可以使用这个组件了:
ReactDOM.render(
<CommentBox/>,
document.getElementById('example')
);这样就将CommentBox放进了example节点中,同样，我们可以在创建组件时向里面传值，可以理解为对象的属性
var HelloMessage = React.createClass({
render: function() {
if(this.props.isConsole == "true"){
console.log(this.props.isConsole);
return <h1>Hello {this.props.name + "sd"}</h1>;
}
else
{
return (<h1>teet</h1>)
}
}
});
ReactDOM.render(
<HelloMessage name="John" isConsole = "true" />,
document.getElementById('example1')
);js 在比较的时候有三个规则
假如有bool的话，会将bool转换为number，即0和1
假如有string 和 number ，会将string 转换为number
将string 直接转换为 bool时，空字符串为false，其他都为true
可以看到上面根据isConsole这个属性，分别return了标签,还有，定义组件的时候，要保证第一个字母是大写，否则会报错。
this.props.children
this.props 的对象，和组件的属性一一对应，但是有一个例外，就是this.props.children，它代表组件的所有子节点。
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
);
上面的NotesList组件，有children是个数组，即两个span。通常，this.children有三种可能：
1.假如没有子节点，返回undefined
2.如果有一个节点，返回object对象
3.如果大于一个节点，返回一个数组
但是我们使用react的方法，React.Children的话，像上面一样，我们不用担心这三种情况。
PropTypes
组建的属性可以接收任意值，包括字符串，数组，对象，函数等，有时候我们想拥有一个机制来验证别人输入的属性是否符合类型标准，组件的PropTypes属性，就是用来验证输入的属性是否符合组件的标准。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
我们创建了MyTitle组件，并且设置他的title属性类型为string，假如传入的是数字，则会在控制台上报错。
此外，getDefaultProps()用来设置属性的默认值：
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);我们将title属性默认设置为Hello World
获取真实的DOM节点
组件并不是真正的DOM节点，按照React的设计，组件是虚拟DOM，所有的DOM变动都会先在虚拟DOM上完成，然后再将实际发生的变动渲染到真正DOM节点上，这能提高页面性能。
有时候我们确实想获取真实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中，有一个输入框，ref为myTextInput，用于接收用户的输入，这时这个节点使用虚拟DOM是获取不到的，必须使用真实DOM节点。我们可以为input设置一个ref属性，然后使用this.refs.[“mytextInput”]，就获取到了这个输入框。但是，我们必须等待组件渲染完成以后才能使用这个方法，否则会报错。
组件的生命周期
组件的生命周期分为三个状态：
Mounting：已插入真实DOM
Updating：正在重新渲染中
Unmounting：已移除真实DOM
React为每种状态都制定了两个方法，分别为will和did，表示将要和已经，共计5种方法，移除只有一个will。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()此外，React还提供两种特殊状态的方法:
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
扫一扫
1093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
