React 入門總結（JSX與組件）

時間  2019-11-10
標籤 react 入門 總結 jsx 組件 欄目 React 简体版
原文   原文鏈接

第一印象

開發代碼css

demo.htmlhtml

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.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">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

開發代碼將 JSX 轉換後，上線的代碼：前端

helloworld.jsnode

ReactDOM.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);

demo.htmlreact

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <!-- No need for Babel! -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body>
</html>

React是什麼

React 是一個 UI 庫，具體說 React 是作 UI 組件的 JavaScript 庫，也就是用 JS 寫前端UI。不一樣於 Angular 是一個完整的框架，React 僅僅只是 VIEW 層。
官方定義：A Javascript Library For Building User Interfaces 。webpack

hello 組件git

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});
 
ReactDom.render(<Hello name="World" />, document.getElementById('container'));

Timer 組件github

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

ReactDom.render(<Timer />, document.getElementById('container'));

Timer 組件結合 webpack 的使用web

Hello.jsx定義組件ajax

var React = require('react');

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

module.exports = Timer;

index.js使用組件

var React = require('react');
var ReactDom = require('react-dom');
var Timer = require('Timer');

ReactDom.render(<Timer />, document.getElementById('container'));

優點

  • api 少，類庫易學

  • 組件內聚，易於組合

  • 原生組件和自定義組件融合渲染

  • 狀態/屬性驅動全局更新，不用關注細節更新

    • props

    • state

  • commonjs 生態圈/工具鏈完善（webpack）

    • webpack

四個概念

  • JSX （可選的）

  • 組件

  • Virtual Dom

  • Data Flow 單向數據綁定

這是 react 四個主要的知識點。本文只簡單介紹總結 JSX 和組件。

JSX

JSX 語法是相似 Html 的xml格式。注意和 Html 語法不太同樣，好比必須是駝峯命名，以及屬性名不能和 JS 關鍵字衝突，例如：className，readOnly。

1、JSX 是可選的

使用 JSX

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

不使用 JSX

"use strict";

var HelloMessage = React.createClass({
  displayName: "HelloMessage",

  render: function render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
});

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

2、JSX 嵌入變量

能夠經過 {變量名} 來將變量的值做爲屬性值

var HelloMessage = React.createClass({
  render: function() {
    return <div>name: {this.props.name}, age: {this.props.age}</div>;
  }
});

var user = {"name":"jack", age:29};
ReactDOM.render(<User user={user} />, mountNode);

3、JSX 熟悉擴散 JSX Spread Attributes

能夠用經過 {...obj} 來批量設置一個對象的鍵值對到組件的屬性，注意順序,由於熟悉能夠被覆蓋

var HelloMessage = React.createClass({
  render: function() {
    return <div>name: {this.props.name}, age: {this.props.age}</div>;
  }
});

var user = {"name":"jack", age:29};
ReactDOM.render(<User {...user} name="override name"/>, mountNode);

4、屬性值可使用 Javascript 表達式

return (
  <nav>
    <Home />
    {loggedIn ? <LogoutButton /> : <LoginButton />}
  </nav>
);

5、須要自閉組件（標籤）Self-Closing Tag

組件（標籤）須要閉合。

var HelloMessage = React.createClass({
  render: function() {
    return (
      <div>
           <MyComponent /> //valid
           <MyComponent >  //invalid
           <img src="#" /> //valid
           <img src="#" > //invalid
      </div>
    );
  }
});

6、一個組件只能返回一個跟節點 Maximum Number of JSX Root Nodes

組件的render函數只能返回一個根節點，若是包含多個子組件，須要使用div或者span或者其餘組件包裹。

//valid

var HelloMessage = React.createClass({
  render: function() {
    return (
      <div>
           <MyComponent /> 
           <img src="#" />
      </div>
    );
  }
});

//invalid

var HelloMessage = React.createClass({
  render: function() {
    return (
      <MyComponent /> 
      <img src="#" />
    );
  }
});

7、JSX中的 false

常見的三種場景

  1. Renders as id="false":

    ReactDOM.render(<div id={false} />, mountNode);

  2. String "false" as input value:

    ReactDOM.render(<input value={false} />, mountNode);

  3. No child:

    ReactDOM.render(<div>{false}</div>, mountNode);

這裏不會渲染成字符串 false 做爲div的子組件。這種作法相似咱們常見的一種用法：

<div>{x > 1 && 'You have more than one item'}</div>

組件

組件有兩個核心的概念：

  • props 屬性，由外面的 JSX 熟悉傳入，永遠是隻讀的，以後建議不要修改。主要用於數據的展現、父子組件的數據傳遞。

  • state 狀態，組件能夠理解爲一個狀態機，fn(state)=>UI。一旦狀態發生改變，組件會自動 render 方法從新渲染UI。

開發組件時，應該讓狀態儘量的少，但能徹底表達整個UI，這樣組件邏輯就容易維護。

無狀態組件（stateless function）: 使用純粹的函數能夠定義無狀態的組件。這種組件只是簡單的從外面接受 props 渲染 DOM。

var React = require('react');
require('../css/gotop.css');

//Stateless functional components

var Top = function () {
    return (
        <div className="back-top">
            <a className="code">
                <div className="code-box"><i></i><img src="http://cdn.tig.qq.com/images/wwq_wx_qrcode.jpg" alt="玩物圈微信二維碼"/></div>
            </a>
            <a href="#top" className="top"></a>
        </div>
    );
};

module.exports = Top;

一般的作法是：一個頂級父組件爲中包括狀態和邏輯，經過props傳遞數據給各個子組件，而子組件是沒有狀態的，子組件只關注數據的渲染。
參考

Most of your components should simply take some data from props and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.

Try to keep as many of your components as possible stateless. By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.

A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.

這種作法在 redux（單向數據流 Flux 模式的一種實現）中顯得很明顯。

參考文檔：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程