React及React Native开发入门学习笔记
目录
1. React
1.1 创建React工程
1.2 学习资料
1.3 主要语法特性
1.3.1 虚拟DOM
1.3.2 JSX及组件
1.3.3 state及props
1.3.4 事件
1.3.5 生命周期
2. React Native
2.1创建、运行工程
2.2 调试
3. RN与React
4. 开源项目推荐
1. React
React Native是基于React的语法特性进行开发的，上手RN之前需要学习React的语法特性。
1.1 创建React工程
使用脚手架创建工程：create-react-app projectName。
脚手架创建的工程默认是封装配置项的，如果我们要进行一些自定义配置，需要执行npm run eject暴露配置项。
以禁止工程运行后默认打开浏览器为例，暴露配置项后，在script/start.js中，注释掉与openBrowser相关的两行（30、130），就可以实现了。
如果执行npm run eject的时候报错“Remove untracked files, stash or commit any changes, and try again.”，是因为.gitignore文件的存在，但是我们又没有建立本地仓库，所以先在项目文件夹下建立git仓库，并提交项目，再执行npm run eject就不会报错。
cd yourFolder
git init
git add .
git commit -m 'Saving before ejecting'
npm run eject
注意，暴露配置项操作不可逆
1.2 学习资料
React的学习，主要看官方文档的基础部分，然后看一些优秀的博客
官网：react官网
优质文章：React入门看这篇就够了
1.3 主要语法特性
1.3.1 虚拟DOM
虚拟DOM由js实现，HTML写在js里，通过diff算法实现视图的高效更新。用一个对象来描述DOM，render执行的结果得到的JavaScript对象就是虚拟DOM，它在DOM的基础上建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。
虚拟DOM diff算法的几个步骤：
（1）用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
（2）当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
（3）把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。
虚拟DOM只把变化的部分重新渲染，提高渲染的效率。原生DOM发生更改时需要遍历，但是大部分DOM内容没有改变，全部遍历渲染效率低。
1.3.2 JSX及组件
React中，使用JSX语法创建组件。
JSX语法示例：const element =
Hello, world!
JSX是一种 JavaScript 的语法扩展。推荐在 React 中使用 JSX 来描述用户界面。JSX 是在 JavaScript 内部实现的，用来声明React当中的元素。
可以在 JSX 中使用 JavaScript 表达式，表达式写在花括号 {} 中。在 JSX 中不能使用 if else 语句，但可以使用三元运算表达式来替代。
如果在 JSX 中给元素添加类, 需要使用 className 代替 class，label 的 for属性，使用htmlFor代替。
创建组件的三种方式：
（1）函数式定义的无状态组件
function HelloComponent(props) {
return
}
ReactDOM.render(
（2）es5原生方式React.createClass定义的组件，逐渐不使用
var InputControlES5 = React.createClass({....}）
ReactDOM.render......
（3）es6形式的extends React.Component定义的组件，推荐
class Clock extends React.Component {
render() {
return (
)}}
组件创建，类名首字母大写
必须有返回值，返回值可以是：JSX对象或null
1.3.3 state及props
React中是单向数据流，自上而下，由父组件传递到子组件。
数据更新原理，setState()方法，要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上，React 元素都是不可变的。当元素被创建之后，是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法。
不要在render方法中调用 setState() 方法，否则会递归渲染，因为状态改变会重新调用render()，render()又重新改变状态。
1.3.4 事件
React 事件绑定属性的命名采用驼峰式写法
激活按钮
constructor(props) {
super(props);
this.state = {
data: [],
loaded: false
}
this.lightBt = this.lightBt.bind(this);
}事件需要在constructor中绑定this
this.handleClick = this.handleClick.bind(this);
构造方法constructor( )其实就是构造函数本身，super()实现继承，子类是没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而super( )就是将父类中的this对象继承给子类的。没有 super，子类就得不到 this 对象。
1.3.5 生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()：组件挂载到页面之前调用，在render()之前，无法获取页面中的DOM对象，可以调用setState()方法，用来发送ajax请求
componentDidMount()：组件已经挂载到页面，可以进行DOM操作，可以发送ajax请求，可以调用setState()方法，但是修改状态会重新渲染。
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()：清除定时器
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调
2. React Native
2.1创建、运行工程
创建工程：react-native init myapp
安装模块包：npm install
配置好开发环境：windows下只能开发安卓应用，请自行安装好Androi Studio等调试环境，或请原生开发人员协助配置
运行：打开Android Studio的模拟器或者连接手机，命令行运行： react-native run-android（有时候需要先运行react-native start）
2.2 调试
代码修改后更新视图：
（1）命令行重新react-native run-android
（2）模拟器，ctrl+m选择reload
（3）安卓模拟器，连续按两下R
（4）模拟器，开启自动刷新，ctrl+m选择Enable Live Reload，某些情况不能改动（增加新的资源，更改原生代码）
（5）模拟器，开启热更新，ctrl+m选择Enable Hot Reloading
（6）真机调试，可以通过晃动手机调出菜单项，等同于模拟器ctrl+m
调试
（1）用chrome浏览器调试，模拟器，ctrl+m选择Debug JS Remotely，会自动打开浏览器窗口，不是显示用户界面，只提供console输出，以及断点调试，无法看网络请求。React的工具React Developer Tools对RN是没有用的
（2）react-native-debugger调试工具，可以检测网络请求，和chrome调试一样，选择Debug JS Remotely，需要关闭浏览器中的debug页面
推荐方式：开启hot reloading，用react-native-debugger调试
Live Reload 刷新整个窗口，状态会丢失，Hot Reloading局部刷新，只刷新更改的部分，更高效。
3. RN与React
（1）React和React Native的原理是相同的，都是由js实现的虚拟dom来驱动界面view层渲染。只不过ReactJs是驱动html dom渲染； React Native是驱动android/ios原生组件渲染。底层 renders 层不同，React 使用的是 虚拟DOM，React Native 替换成了native 组件。react 直接渲染dom，而rn生成id，用bridge（最新用c++实现）变成一个表，等待 native 去调用。RN调用Objective-C 的API 去渲染iOS 组件，调用Java API 去渲染Android 组件
（2）rn继承了react的优点，声明式、组件化、基于状态等
（3）flex布局有些特性不同，参考：Flex布局在RN端与Web端规则对比
4. 开源项目推荐
30-days-of-react-native：https://github.com/fangwei716/30-days-of-react-native
react-native-thirdparty：https://github.com/Geek-ch/react-native-thirdparty
很全的RN第三方库总结：https://github.com/Geek-ch/react-native-thirdparty