React Native学习笔记（2）--React与JSX语法

来源：互联网发布：迅雷播放器 for mac 编辑：程序博客网时间：2024/05/18 01:46

React 学习笔记

一、React

React是由facebook开源的前端组件化框架，虽然当前对React的评论各式各样，但是就React专注的点来说（前端功能分解化，使得前端开发像搭积木一样快速并且易维护），还是得到了很多公司的青睐。

1、React的特点：

(1) React可以只作为视图在MVC中使用，这样可以很容易使用React在已有项目的基础之上进行开发
(2) 虚拟DOM：这个是React的一个亮点，同时也是React高性能的核心。使用虚拟DOM可以将原本的HTML页面DOM更新的操作转移到内存中。通过在内存中的高效率计算，计算出最小的需要更新的DOM视图再进行更新，以完成整个组件的渲染。
(3)数据流：React使用单向数据流，相对于传统的数据绑定而言更加快捷，灵活。

2、React的HelloWorld

<!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">      var HelloWorld= React.createClass({          render: function() {            return (              <div>                Hello, world!              </div>            );          }        });        ReactDOM.render(          <HelloWorld/>,          document.getElementById('example')        );    </script>  </body></html>

上面的代码中，首先定义了一个HelloWorld的React组件，组件返回一个div，div中写了Hello, world!字符串。然后通过ReactDOM.render方法将HelloWorld组件渲染到body中Id为“example”的div中。

2、props属性传递

<!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">      var HelloWorld= React.createClass({          render: function() {            return (              <div>                Hello, world, {this.props.name}!              </div>            );          }        });        ReactDOM.render(          <HelloWorld name="Jason"/>,          document.getElementById('example')        );    </script>  </body></html>

上述代码与helloworld的代码几乎一样，唯一的区别是在Hello, world后面添加了一个名称，而这个名称是在ReactDOM.render渲染的时候通过name属性传进来的，所有在标签中出现的属性（如上面的name）都被赋值给了React组件内部的props对象。

props用来向React组件传递属性，一般来说属性是组件天生的东西，在组件内部是不可以更改的。

3、state状态更新

<!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">      var HelloWorld= React.createClass({          getInitialState : function(){              return {                  number: 0              }          },          render: function() {            return (              <div>                Hello, world! Number : {this.state.number}!              </div>            );          },          handleNumberAdd : function(){             this.setState({number : this.state.number + 1});            },          componentDidMount : function(){              setInterval(this.handleNumberAdd, 1000);          }        });        ReactDOM.render(          <HelloWorld name="Jason"/>,          document.getElementById('example')        );    </script>  </body></html>

上述代码中，在Hello, world后面添加了一个数字参数，这个参数的值时通过this.state.number获取的，并且在componentDidMount 方法中有一个定时器，起作用是每隔1秒钟调用一次handleNumberAdd 方法，在handleNumberAdd 方法中则是将this.state.number的值加上1之后再赋值给number，那么this.setState是用来干嘛的呢？其实从字面意思就很容易理解，它其实就是用来更新React组件内部的state对象的。运行代码会很容易发现，在界面中每隔一秒钟Hello, world! Number : 0的值就会增加1，观察可以发现这个数值更新时浏览器并没有整体更新，这便是前面讲的虚拟DOM的作用了。

state是用来向维持React组件当前时刻的状态的，一旦这个状态有变化，那么组件就会计算虚拟DOM并且重新渲染变化。

4、React常用函数

(1)getDefaultProps：该方法用来设置React组件的默认属性，return一个js对象
(2)getInitialState : 该方法用来设置React组件的默认状态，return一个js对象或者null
(3)componentDidMount : 当组件渲染完毕之后调用
(4)componentWillUnmount : 当组件即将销毁时调用
(5)componentDidUpdate ：当组件更新完成之后调用
(6)setState : 用来更新当前组件的状态
(7)render : 用来返回需要渲染的内容

二、JXS

简单来讲，JSX其实就是js，只是jsx允许在js中写html代码。（上面介绍React的时候我们已经使用到了JSX的语法了）
例如：

 render: function() {            return (              <div>                Hello, world! Number : {this.state.number}!              </div>            );          }

几个需要注意的地方：

1、在JSX中写class时要写成className，例如<div className="test_class"></div>
2、在JSX中写内嵌样式style时，必须要使用对象。例如：
var style = { color : red }; <div style={style}></div>
3、JSX返回的HTML标签最外层只能有一个html标签。例如：

return （<div>            Hello, world! Number : {this.state.number}!        </div>）

是允许的，但是

return （<div>            Hello, world! Number : {this.state.number}!        </div>        <div>            Hello, world! Number : {this.state.number}!        </div>）

是不允许的。

0 0