React Native系列之-React.js入门

最新推荐文章于 2023-12-04 17:34:11 发布

_StriveG

最新推荐文章于 2023-12-04 17:34:11 发布

阅读量1k

点赞数

分类专栏： React Native 文章标签： React

本文链接：https://blog.csdn.net/qq_21430549/article/details/48932015

版权

React Native 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

    在学习之前，我们先去下载上入门程序包。[下载](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, world!</h1>,
  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, world!</h1>,
  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}}，这是因为组件样式是一个对象。

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

_StriveG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫

专栏目录