初識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
);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。