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(){}

2.ReactDOM.render是React最基本的方法，用于将模板转化为HTML语言并插入制定DOM节点

3.事件都使用骆驼命名法：onClick onChange等

4、this.props.children 表示组件的所有子节点

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 提供一个工具方法 React.Children 来处理 this.props.children
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

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

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取

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

6.获取DOM节点-ref属性

获取文本框的值

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

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>

View Code

学习参考：

http://www.ruanyifeng.com/blog/2015/03/react.html

https://www.cnblogs.com/wangfupeng1988/p/5302738.html