React-Native（三）：React Native是基于React设计的

时间：2021-07-26 23:38:53
  • React Native是基于React js设计的。

　　参考：《React 入门实例教程》

　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

　　由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

　　这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见《也许，DOM 不是答案》）。

关于代码包：https://github.com/ruanyf/react-demos

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

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      ReactDOM.render(

        <h1>Hello, world!</h1>,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

React-Native（三）：React Native是基于React设计的

2）HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(

        <div>

        {

          names.map(function (name, index) {

            return <div key={index}>Hello, {name}!</div>

          })

        }

        </div>,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

React-Native（三）：React Native是基于React设计的

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var arr = [

        <h1 key="1">Hello world!</h1>,

        <h2 key="2">React is awesome</h2>,

      ];

      ReactDOM.render(

        <div>{arr}</div>,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

React-Native（三）：React Native是基于React设计的

3）React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var HelloMessage = React.createClass({

        render: function() {

          return <h1>Hello {this.props.name}</h1>;

        }

      });

      ReactDOM.render(

        <HelloMessage name="John" />,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

React-Native（三）：React Native是基于React设计的

4）this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var NotesList = React.createClass({

        render: function() {

          return (

            <ol>

              {

                React.Children.map(this.props.children, function (child) {

                  return <li>{child}</li>;

                })

              }

            </ol>

          );

        }

      });

      ReactDOM.render(

        <NotesList>

          <span>hello</span>

          <span>world</span>

        </NotesList>,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

React-Native（三）：React Native是基于React设计的

5）组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var data = 123;

      var MyTitle = React.createClass({

        propTypes: {

          title: React.PropTypes.string.isRequired,

        },

        render: function() {

          return <h1> {this.props.title} </h1>;

        }

      });

      ReactDOM.render(

        <MyTitle title={data} />,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

React-Native（三）：React Native是基于React设计的

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

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

var MyComponent = React.createClass({

  handleClick: function() {

    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>

    );

  }

});

ReactDOM.render(

  <MyComponent />,

  document.getElementById('example')

);

    </script>

  </body>

</html>

React-Native（三）：React Native是基于React设计的

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

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

var LikeButton = React.createClass({

  getInitialState: function() {

    return {liked: false};

  },

  handleClick: function(event) {

    this.setState({liked: !this.state.liked});

  },

  render: function() {

    var text = this.state.liked ? 'like' : 'haven\'t liked';

    return (

      <p onClick={this.handleClick}>

        You {text} this. Click to toggle.

      </p>

    );

  }

});

ReactDOM.render(

  <LikeButton />,

  document.getElementById('example')

);

    </script>

  </body>

</html>

React-Native（三）：React Native是基于React设计的

8）表单：用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      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>

          );

        }

      });

      ReactDOM.render(<Input/>, document.getElementById('example'));

    </script>

  </body>

</html>

，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。

React-Native（三）：React Native是基于React设计的

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)：组件判断是否重新渲染时调用

这些方法的详细说明，可以参考官方文档。

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      var Hello = React.createClass({

        getInitialState: function () {

          return {

            opacity: 1.0

          };

        },

        componentDidMount: function () {

          this.timer = setInterval(function () {

            var opacity = this.state.opacity;

            opacity -= .05;

            if (opacity < 0.1) {

              opacity = 1.0;

            }

            this.setState({

              opacity: opacity

            });

          }.bind(this), 100);

        },

        render: function () {

          return (

            <div style={{opacity: this.state.opacity}}>

              Hello {this.props.name}

            </div>

          );

        }

      });

      ReactDOM.render(

        <Hello name="world"/>,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

React-Native（三）：React Native是基于React设计的

10）Ajax：组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

    <script src="../build/jquery.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

var UserGist = React.createClass({

  getInitialState: function() {

    return {

      username: '',

      lastGistUrl: ''

    };

  },

  componentDidMount: function() {

    $.get(this.props.source, function(result) {

      var lastGist = result[0];

      if (this.isMounted()) {

        this.setState({

          username: lastGist.owner.login,

          lastGistUrl: lastGist.html_url

        });

      }

    }.bind(this));

  },

  render: function() {

    return (

      <div>

        {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.

      </div>

    );

  }

});

ReactDOM.render(

  <UserGist source="https://api.github.com/users/octocat/gists" />,

  document.getElementById('example')

);

    </script>

  </body>

</html>

React-Native（三）：React Native是基于React设计的

上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。

我们甚至可以把一个Promise对象传入组件。



ReactDOM.render(

  <RepoList

    promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}

  />,

  document.body

);

上面代码从Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件。

如果Promise对象正在抓取数据（pending状态），组件显示"正在加载"；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。

React-Native（三）：React Native是基于React设计的

相关文章