Android React-Native 之React JS笔记

React是由ReactJS与React Native组成，其中ReactJS是Facebook开源的一个前端框架，React Native是ReactJS思想在native上的体现！

其中，包含的知识点有：

React JSX
React 组件
React 组件生命周期
React 表单与事件

一.React JSX

1.JSX并不是新语言，也没有改变JavaScript的语法，只是对JavaScript的拓展。

２.环境配置：

   <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>

依赖以上三个文件。

JSX 看起来类似 HTML,先看个实例：

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

３.标签：　
HTML标签与 ReactJS创建的组件类标签是有区别的， ReactJS标签声明声明变量采用首字母大写,通过变量的声明，来区分HTML标签和React组件，这个可以看作一个约定吧。

转换解析器

#JSX
<h3>Hello, world</h3>

#native JS
React.createElement("h3",null,"Hello, world")//返回一个ReactElement对象

执行一个JavaScript表达式

var msg="Hello, world";
<h1>{msg}</h1>

转换成：
React.createElement("h1",null,msg)

6.注释

   单行：//
   多行：/*注释文本*/

7.属性

  var msg=<h1 width="10px">Hello, world</h1>

  React.createElement("h1",{width:"10px"},"Hello, world")

自定义属性(HTML5给出了方案，凡是以data-开头的自定义属性，可渲染到页面)
样式的使用
style属性 js对象外层{}按照JSX语法内层{}是JavaScript对象
事件绑定
注意：onClick 调用bind方法（设定作用域，要传递的参数）

注意事项：

待更新。。。。。。。。。

----引用

React 组件生命周期
在本章节中我们将讨论 React 组件的生命周期。
组件的生命周期可分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
生命周期的方法有：
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

最后编辑于：2017.11.24 09:47:31