React Native系列之-React.js入门

在学习之前，我们先去下载上入门程序包。[下载](http://facebook.github.io/react/downloads/react-0.13.1.zip)。这个里面有官方的demo和一些js文件。这篇博客只是简单的接扫下，毕竟我学的不是web开发。

接下来看看html页面大致结构：

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel"> React.render( <h1>Hello,world!</h1>,document.getElementById('example') ); </script>
  </body>
</html>

其中的browser.min.js是讲JSX语法转化为JavaScript语法。这一步很耗时间。并且，凡是在用到JSX的地方，都要加上type=”text/babel”
当然我们也可以将js写在独立的文件中（文件分离）,新建src/helloworld.js

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

然后在html文件中引用

<script type="text/jsx" src="src/helloworld.js"></script>

1.React.render()
React.render()是React的最基本方法，用于将模板转化为HTML语音，并插入指定的DOM节点。

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

2.JSX语法
HTML语言直接写在JavaScript语言之中，不加任何引号，这就是JSX的语法，他允许HTML与JavaScript的混写。
规则：遇到HTML标签(以<开头)，就用HTML规则解析，遇到代码块(以{开头)，就用JavaScript规则解析。
如：

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel"> var names = ['tygyxy','jisunjixi','quanshijie']; React.render( <div> { names.map(function (name) { return <div>Hello,{name}!</div> }) } </div>,document.getElementById('example') ); </script>
  </body>
</html>

效果如下图：

JSX允许直接在模板插入JavaScript的变量。如果这个变量是数组，则会展开这个数组的所有成员。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel"> var arr = [ <h1>Hello world!</h1>,<h2>React is awesome</h2>,<h3>My name is quanshijie</h3> ]; React.render( <div>{arr}</div>,document.getElementById('example') ); </script>
  </body>
</html>

效果下图：

3.组件，关于组件我们在上一篇有讲过，在这里就不多说了。

React.createClass 方法生成组件类
属性值存在this.props中

4.this.props.children
this.props.children表示所有子节点。

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <script type="text/babel"> var NotesList = React.createClass({ render: function() { return ( <ol> { this.props.children.map(function (child) { return <li>{child}</li> }) } </ol> ); } }); React.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>,document.body ); </script>
  </body>
</html>

效果图：

5.PropTypes 组件的属性可以接受任意值、字符串、对象、函数等。但是通过PropTypes我们就可以看提供的参数是否符合要求。

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isrequired,},render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

var data = 123;

React.render(
  <MyTitle title={data} />,
  document.body
);

这样的话ttile属性就通不过验证了。

6.React.findDOMNode()
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。有时，需要从组件获取真实的DOM的节点，这时候就需要用到React.findDOMNode().

var MyComponent = React.createClass({
  handleClick: function() {
    React.findDOMNode(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>
    );
  }
});

React.render(
  <MyComponent />,document.getElementById('example')
);

文本输入框想获取到用户的输入，虚拟的DOM是不行的，所以用React.findDOMNode()。

7.this.state 状态
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI

例子就不举了，上篇的计时器就是这样子的。

8.表单

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>
    );
  }
});

React.render(<Input/>,document.body);

用户在表单输入内容，属于用户跟组件的互动，所以不能用this.props读取，而要定义一个onChange事件回调函数，通过event.target.value读取。上篇中也有例子。

9.生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps,object nextState)
componentDidUpdate(object prevProps,object prevState)
componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps,object nextState)：组件判断是否重新渲染时调用

另外：组件style属性要写成style={{opacity: this.state.opacity}}，这是因为组件样式是一个对象。

参考资料：阮一峰
参考资料：官方文档
参考资料：中文教程

React Native系列之-React.js入门

相关文章