React+webpack從0到1開發一個todoMvc（二）

Zegendary發表於2017-12-13
ReactWebMVC

#React如何雙向繫結 todoMvc-2step原始碼 todoMvc-2step演示 上一章主要說了下react+webpack的環境搭建，這一章主要講一下如何雙向繫結。對vue和angular略有了解的都知道，這兩個框架都是支援雙向繫結的，而react是單向繫結的，知乎有一篇關於單向繫結和雙向繫結可以擴充一下：單向資料繫結和雙向資料繫結的優缺點，適合什麼場景？

##下面分析如何具體實現 進入我們的app.js檔案，在之前我們搭建環境的時候已經安裝了react相關的依賴以及babel編譯工具，所以我們可以直接在這裡使用ES6、JSX語法。 ####1.引入react核心內容

import React from 'react'
import ReactDOM from 'react-dom'
複製程式碼

其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能。

####2.生成元件 先介紹react三個比較重要的知識點： 1）ReactDOM.render() ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。舉個例子：

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
複製程式碼

上面程式碼將一個 h1 標題，插入 example 節點。 2）JSX 語法 HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫，上面的<h1>Hello, world!</h1>，就是使用了jsx語法。 3）元件 React 允許將程式碼封裝成元件（component），然後像插入普通 HTML 標籤一樣，在網頁中插入這個元件。React.createClass 方法就用於生成一個元件類。舉個?：

#es5寫法
 var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello React</h1>;
  }
});
#es6寫法
Class HelloMessage extends React.Component {
  render() {
    return <h1>Hello, React</hr>;
  }
}
複製程式碼

當然，這裡的HelloMessage我們也可以當做HTML標籤用ReactDOM.render()渲染出來。

app.js:

class App extends React.Component { //定義元件，繼承父類
  constructor() {//constructor 是和 class 一起用來建立和初始化物件的特殊方法。
    super()//在裝載元件(mounting)之前呼叫會React元件的建構函式。當實現React.Component子類的建構函式時，應該在任何其他語句之前呼叫super(props)
    this.state = {//設定初始狀態
      todos: []
    }
  }
  // 繫結鍵盤迴車事件，新增新任務
  handlerKeyUp(e) {
    if(e.keyCode == 13) {
      let value = e.target.value;
      if(!value) return false;
      let newTodoItem = {
        text: value,
        isDone: false
      };
      e.target.value = '';
      this.state.todos.push(newTodoItem)
      this.setState({todos: this.state.todos});  //修改狀態值，每次修改以後，自動呼叫 this.render 方法，再次渲染元件。
    }
  }
  render(){
    return (
      <div className="todo-input">
        <input type="text" placeholder="請輸入待辦事項" onKeyUp={this.handlerKeyUp.bind(this)}/>
        <ul>
          {this.state.todos.map((todo,index) => {{
            return (
                <li key={index}>{todo.text}</li>//Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
            )
          }})}
        </ul>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('app'))
複製程式碼

####3.測試 執行

$ webpack
複製程式碼

然後開啟index.html，如果可以在input輸入，按下回車可以在下方生成list

成功畫面

那麼恭喜你，雙向繫結功能圓滿完成！ React+webpack從0到1開發一個todoMvc（一）  React+webpack從0到1開發一個todoMvc（三）  React+webpack從0到1開發一個todoMvc（四）  React+webpack從0到1開發一個todoMvc（五）

相關文章