初识React Native虚拟DOM节点及API

时间 2019-11-10

标签 react native 虚拟 dom 节点 api 栏目 React 繁體版

原文原文链接

Reative Native是著名设社交网络公司Facebook旗下的一款旨在实现虚拟Virtual交互到Native交互层高效交互的View层框架，经过虚拟DOM UI来转为Native UI，经过JSX实现Javascript,IOS,Android原生开发语言的交互，充当一种桥梁(Bridge)的角色，相似一种交叉编译。javascript

虽然不能跨平台应用，但能在各平台上实现各自的代码，但统一的风格，高效的开发受到众多跨平台。css

学习网站：html

React Native 官方文档中文版java

React Nativereact

React Native Github地址
jquery

ReactJs官网git

示例代码github

先来看看最简单的代码react-native

<!DOCTYPE html><html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <!------------start:开发中必须使用的3个js库--------------->
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
     <!------------end:开发中必须使用的3个js库--------------->
  </head>
  <body>
    <div id="example"></div>

     <!--使用特定的script type-->
    <script type="text/babel">
    //首先定义一个UI组建类
var Hello = React.createClass({
  render: function() {
  //css样式使用驼峰写法,如className
    return <div className="commentBox">Hello {this.props.name}{this.props.myAge}</div>;
  }
});
<!--渲染虚拟节点，而且将虚拟节点添加到指定div，注意，这里没有标准属性，一切属性属于自定义-->
ReactDOM.render(
  <Hello name="World" myAge="20" />,
  document.getElementById('container')
);
    </script>
  </body>
  </html>

固然，咱们也可使得代码和UI分离api

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <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>
  <!--load appjsx到页面，注意，默认状况下不会load，除非改html放到服务器下-->
  <script type="text/babel" src=js/app.js>
  </script>
</head>
<body>
<div id="example">
</div>
</body>
</html>

app.js---注意，旧版本是app.jsx

class RepoList extends React.Component{
 // <!--启用构造函数，传入参数-->
  constructor(props) {
    super(props);
    this.state= {
      loading: true,
      error: null,
      data: null
    }
  }
 // <!--当jsx渲染完成后执行-->
  componentDidMount() 
  {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  }
   // <!--当jsx渲染完成后执行-->
  render() {
    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo) {
        return (
          <li><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
}
//获取js输入，并赋值给promise,注意数据结构是 promise={{....}}
ReactDOM.render(
  <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
  document.body
);