React-學習總結

時間 2019-11-12

標籤 react 學習總結欄目 React 简体版

原文原文鏈接

概念知識：
1.JSX是什麼
JSX實際上是JavaScript的擴展，React爲了代碼的可讀性更方便地建立虛擬DOM等緣由，加入了一些相似XML的語法的擴展。

2.編譯器——jsxTransformer
JSX代碼並不能直接運行，須要將它編譯成正常的JavaScript表達式才能運行，jsxTransformer.js就是這一編譯器的角色。

3.第二代編譯器——babel 
React官方博客發佈了一篇文章，聲明其自身用於JSX語法解析的編譯器JSTransform已通過期，再也不維護，React JS和React Native已經所有采用第三方Babel的JSX編譯器實現。緣由是二者在功能上已經徹底重複，而Babel做爲專門的JavaScript語法編譯工具，提供了更爲強大的功能。而browser.js是babel編譯器的瀏覽器版本。

在react 0.14前，瀏覽器端實現對jsx的編譯依賴jsxtransformer.js 
在react 0.14後，這個依賴的庫改成browser.js
頁面script標籤的type也由text/jsx改成text/babel

1. 組件名稱開頭必須大寫

var NewList = React.createClass(){}css

2.ReactDOM.render是React最基本的方法，用於將模板轉化爲HTML語言並插入制定DOM節點html

3.事件都使用駱駝命名法：onClick onChange等react

四、this.props.children 表示組件的全部子節點git

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
　　    // props獲取父組件的數據
　　    // this.props.children.map(function(child){})
       // var rows = this.props.children;React.Children.map(rows,function(child){})

        React.Children.map(this.props.children, function (child) { // React 提供一個工具方法  來處理 
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);React.Childrenthis.props.children

上面代碼的 NoteList 組件有兩個 span 子節點，它們均可以經過 this.props.children 讀取github

5.獲取子元素的長度:render:function(){return(<p>count子元素長度：{React.Children.count(this.props.children)}</p>)}web

6.獲取DOM節點-ref屬性api

<input type="text" ref="txtData">數組

獲取文本框的值瀏覽器

var inputDom = this.refs.txtData; // 不須要使用findDOMNode()方法babel

var data = inputDom.value;

7.React提倡全部的數據都是由父組件來管理，經過props的形式傳遞給子組件來處理 this.props

React開發的規範，組件內部的數據由state控制，外部對內部傳遞數據時使用 props

8.在組建中添加多個屬性寫法：

 var Info = React.createClass({
        render:function(){
            var myAttr = {
                'ref ': 'txtData',
                'data-id': 'inputID',
                'onClick': function () {
                    console.log("onClick");
                }
            }
            return <input type="button" {...myAttr} value={this.props.name} /> // {...myAttr}綁定多個屬性
            }
        })
    ReactDOM.render(<Info name="I AM A BUTTON" />,document.getElementById('box'));

例子:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>todolist</title>
  6     <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
  7     <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
  8     <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  9     <style>
 10         ul{margin:0;padding:0;}
 11         ul li{list-style: none;}
 12         .ul-box{margin-top:20px;}
 13         .ul-box li{margin-top:10px;}
 14         button{margin-left:10px;background: #f1f1f1;border:1px solid #e2e2e2;padding:6px 10px;}
 15         .input-txt{height: 27px;line-height: 27px;border:1px solid #e2e2e2;}
 16     </style>
 17 </head>
 18 <div id="container"></div>
 19 <!-- <script type="text/babel"></script>webstorm暫時不支持這一種 -->
 20 <script type="text/jsx">
 21     // 增刪改Demo
 22     // this.props.todo.map 循環
 23     var TodoList = React.createClass({
 24         // 初始化數據
 25         getInitialState:function(){
 26          return{
 27              todoList:[]
 28          }
 29         },
 30         // 更新數據
 31         changeHandle:function(rows){
 32             this.setState({
 33                todoList : rows
 34             })
 35         },
 36 
 37       render:function(){
 38           return(
 39                   <div>
 40                       <NewList onAdd={this.changeHandle} todo={this.state.todoList}/>
 41                       <ShowList onDel={this.changeHandle} todo={this.state.todoList} onSave={this.changeHandle}/>
 42 
 43                   </div>
 44           )
 45       }
 46     });
 47 
 48     // 新增
 49     var NewList = React.createClass({
 50         addHandle:function(e){
 51             e.preventDefault();
 52             // 從父組件獲取數據 使用props
 53             var rows = this.props.todo;
 54           // 獲取文本框的值
 55            var inputNew = this.refs.txtNewDate;
 56             var newData = inputNew.value.trim();
 57             if(newData != ""){
 58                 // 追加到原來的數據中
 59                 rows.push(newData);
 60                 this.props.onAdd(rows);
 61             }
 62             inputNew.value = "";
 63                    },
 64         render:function(){
 65             return(
 66              <form onSubmit={this.addHandle}>
 67                  <input className="input-txt" type="text" placeholder="新增內容" ref="txtNewDate" id="txtNewDate"/>
 68                  <button onClick={this.addHandle}>新增</button>
 69              </form>
 70             )
 71         }
 72     })
 73     // 展現+修改+刪除
 74     var ShowList = React.createClass({
 75         delHandle:function(e){
 76           // 獲取要刪除的索引
 77             var delIndex = e.target.getAttribute("data-key");
 78             this.props.todo.splice(delIndex,1);
 79             this.props.onDel(this.props.todo);
 80         },
 81         editHandle:function(e){
 82           // 將本來的值賦值到文本框
 83           // 將按鈕文字改成保存
 84             var inputNew = document.getElementById("txtNewDate");
 85             //console.log(e.target.innerHTML)
 86             inputNew.value = e.target.getAttribute("data-item");
 87         },
 88         saveHandle:function(e){
 89             var saveIndex = e.target.getAttribute("data-key");
 90             var rows = this.props.todo;
 91 
 92             React.Children.map(rows,function(item,i){
 93                 if(i == saveIndex){
 94                     // 保存時存在相同id則刪除原來的
 95                     rows.splice(saveIndex,1);
 96                 }
 97             })
 98             var inputNew = document.getElementById("txtNewDate");
 99             var saveData = inputNew.value.trim();
100             rows.push(saveData);
101             this.props.onSave(rows);// 更新render
102         },
103         render:function(){
104             var children = this.props.todo;
105             var childArray = React.Children.toArray(children);
106 
107             return(
108                     <div>
109                     <h3>toArray數組排序：{childArray.sort().join(' ')}</h3>
110                     <p>count長度：{React.Children.count(this.props.todo)}</p>
111                         <ul className="ul-box">
112                         {
113                         // 循環li
114                                 // 方法一：this.props.todo.map(function(item,i){})
115                                 React.Children.map(children,function(item,i){
116                                     var id = "itemList";
117                                    return(
118                                            <li>
119                                                <label data-id={id-i}>{item}</label>
120                                                <button  data-key={i} onClick={this.delHandle}>刪除</button>
121                                                <button  data-key={i} data-item={item} onClick={this.editHandle}>修改</button>
122                                                <button  data-key={i} onClick={this.saveHandle}>保存</button>
123                                            </li>
124                                    )
125                                 }.bind(this))
126                         }
127                     </ul>
128                     </div>
129             )
130 
131         }
132     })
133     ReactDOM.render(<TodoList/>,document.getElementById("container"));
134 </script>
135 </body>
136 </html>