react的基本操作(1)

Mengeer發表於2018-07-30
React

1.react 元件建立

首先要引入以下三個庫:

  • react.min.js – React 的核心庫
  • react-dom.min.js – 提供與 DOM 相關的功能
  • babel.min.js – Babel 可以將 ES6 程式碼轉為 ES5 程式碼，這樣我們就能在目前不支援 ES6 瀏覽器上執行 React 程式碼。Babel 內嵌了對 JSX 的支援。通過將 Babel 和 babel-sublime 包（package）一同使用可以讓原始碼的語法渲染上升到一個全新的水平

react元件的建立有三種方式:

(1).

<script type="text/babel"> //型別必須為babel
    var Hello =React.createClass({
        render:function(){
            return <p>hello</p>;
        }
    });
    ReactDOM.render(
        <Hello/>,
        document.getElementById(`exp`)
    )
</script>

首先建立react 元件類,在通過ReactDOM.render()將其渲染在id為exp的dom中

(2)使用函式定義了一個元件：

function New(props,refs){
                console.log(props,refs)
                return <p>New</p>;
            }
            ReactDOM.render(
                <New class="q"/>,
                document.getElementById(`example`)
            );

(3)使用 ES6 class 來定義一個元件:

class New extends React.Component {
        render() {
            return (
　　　　　　　　<p>New</p>
            )
        }
    ReactDOM.render(
        <New/>,
        document.getElementById(`ex`)
    )

2.react State(狀態)

React 把元件看成是一個狀態機（State Machines）。通過與使用者的互動，實現不同狀態，然後渲染 UI，讓使用者介面和資料保持一致。

React 裡，只需更新元件的 state，然後根據新的 state 重新渲染使用者介面（不要操作 DOM）。

以下例項建立一個名稱擴充套件為 React.Component 的 ES6 類，在 render() 方法中使用 this.state 來修改當前的時間。

新增一個類建構函式來初始化狀態 this.state，類元件應始終使用 props 呼叫基礎建構函式。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};//初始化state
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>現在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById(`example`)
);

 

3.refs 使用

class New extends React.Component {
        render() {
            return (
                <div ref>//在元件的某個節點標籤上 新增 ref
                         //即可在this.refs中看到該節點下的所有 節點,即資料
                    <p>1</p>
                    <span>2</span>
                </div>
            )
        }
        componentDidMount(){
            console.log(this.refs.true.children[0].innerHTML)//通過refs獲取帶有 ref節點的 第一個子元素的內容
        }
    }
    ReactDOM.render(
        <New/>,
        document.getElementById(`ex`)
    )

 

相關文章