组件的构造函数，组件创建时会自动的被执行。map函数，循环list。this指向。

constructor 为组件创建的时候会执行的构造函数。

this.state 为组件数据项，可以存储很多数据内容。

循环获取state定义的list里面的内容

{

this.state.list.map((itxx) => {

    return <li>{itxx}</li>

})

}

使用.bind(this) 语句表示绑定父组件，不然子组件里面的this表示当前而无法找到this.state

this.state.list.push('xxx'); 无法添加数据到list并改变组件显示，

而需要调用this.setState方法和展开运算符语法添加到list。

setState数据发生变化时界面才会发送变化。

增加第二个参数返回（item, index）index 为list数组的下标，

<li 标签增加 key={index} 去除没有key警告（注意key值不能重复）

编写TodoList功能

    将 App组件 改成TodoList

        App文件重命名为 Todolist

        类名改成Todolist， 导出 Todolsit

        index.js 引入 Todolist

    render 返回的最外层不能多兄弟标签

    事件名称使用小驼峰命名

    类里面方法中的this默认指向方法而不是类，所以需要对this做绑定

    不能直接赋值 state，而是通过 setState()

    ...arr 数组展开运算符，可以用于追加内容

    ｜ [...this.state.list, 'english']

React面向数据编程，自动处理DOM

class组件

constructor(props){ //组件创建时自动执行
    super(props); //初始化
    this.state = { //创建state对象
        list:[],
        inputVal:''
    }
    
    //优化
    this.inputChange = this.inputChange.bind(this)
    this.butClick = this.butClick.bind(this)
    
}

btnClick() {//增加
    this.setState({//改变state数据
        list: [...this.state.list,this.state.inputVal],
        inputVal:''
    })
}

inputChange(e) {//输入框内容
    this.setState({
        inputVal: e.target.value
    })
}

itemDel(index){//删除
    let list=[...this.state.list]
    list.splice(index,1)
    this.setState({list})
}

//DOM
render(){
    return(
        <div>
            <div>
                <input value={this.state.inputVal} onChange={this.inputChange}/>
                <button onClick={this.butClick}>add</button>
            </div> 
            <ul>
                {
                    this.state.list.map((item,index) => {  //循环list
                        return <li key={index} onClick={this.itemDel.bind(this,index)}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
}

js基础：this指向

es6语法：class-constructor 扩展运算符

this指向问题

1:展开运算符[...]（es6的写法）
2：setState()

this.handleBtnClick

这个this指的是当前TodoList

而handleBtnClick函数体中的this表示按钮，但是我们需要其指向TodoList,

解决方法：

this.handleBtnClick.bind(this)

1.this指向；2.ES6的class类方法；3.react中改变数据时使用setState方法；4.数组的解构赋值

button监听click时的方法，this指向为当前button，需要在方法调用后将其this使用bind绑定到当前方法。

改变state数据不可以用传统方法直接赋值或push，需要用setState方法改变其值。

render函數return出去的內容只能是一個大的JSX

constructor是組件被創出的一瞬間會俾自動執行

當TodoList組件剛被創建的時候，constructor會被自動執行，super(props)做一些初始化，創建一個state的數組對象

React裡面的state數據只能使用this.setState去改變

當數據發生變化的時候，React會重新自動去執行render函數，重新去渲染頁面，所以數據一變化，頁面就跟住變化。之前的編程是自己去操作dom，而在React裡面不在是操作dom，而是面向數據編程。

React要求我們，每一項的內容返回的時候，標籤上必須要有key值，key值是唯一的，不能重複

不想要讓他報這個警告

在我們循環展示 list 裡面每一項的時候，React要求我們，每一項的內容返回的時候，標籤上必須要有 key值

this.state.list.map((item, index) => {

    return <li key={index}>{item}</li>

})

雖然沒有報錯了，但按下 add按鈕，沒有添加數據

在 REACT 中要改變 state 裡面的數據，你不要直接調用 this.state.list.push('hello world')去改變數據，而是要使用 REACT 提供給我們的方法：

this.setState(
)

範例中使用 ES6 語法， ... 表示展開運算符，也就是把之前 list 裡面的三個資料放在前面，也就是新的 list 裡面會包含老的 list內容，同時又往 list 裡面增加 hello world 內容。

當數據發生變化的時候，React會自動重新的執行 render函式來渲染畫面

報錯 ：找不到 this.state

因為當 button被點擊的時候，是指向 TodoList 組件，但當這個handleBtnClick() 函數運行的時候，裡面的this是指向 button這個按鈕了，而這個 button當然沒有 state 這個東西。

我們點擊 button 運行 handleBtnClick() 的時候，函數裡面的this指向 TodoList 不要指向 button，我們可以這樣寫，我讓這函數的this和外層的this綁定。

this.handleBtnClick.bind(this)

REACT中不再是操作DOM，而是面向數據編程。

construct是構造函式 (ES6)，在組件創建的一瞬間會執行
state是數據存放的位置，比如這裡的 list

原因事件是小寫的c，而 react的事件是大寫的C，onClick。

JSX裡面寫要寫個JSX表達式的話，一定要用 {} 包裹起來

報錯原因
render()函數 return出去的內容，只能是一個大的JSX。
所以這兩個小的JSX區塊一定要包裹在一個大的JSX裡面。

react 是面向数据编程

更改数据用 this.setState()

import React from 'react';

//React避免 Dom 操作，主要是面向数据操作;
  class ToDoList extends React.Component{

      //state存放数据的地方；
      constructor(props){
          super(props);
          this.state = {
             list:[
             ]
          }

      }

      //修改state用setState；
      handleBtnClick(){
          this.setState({
              list:[
                  ...this.state.list,
                  'add css'
              ]
          });
      }
    render(){
      return (
          <div>
              <div>
                  <input></input>
                  <button onClick={this.handleBtnClick.bind(this)}>add</button>
              </div>
              <ul>
                  {this.state.list.map((item,index)=>{
                      return <li key={index}>{item}</li>
                  })}
              </ul>
          </div>
      );
    }
}


export default ToDoList;

[...arr,aa] 展开运算符

this用法

ES6知识

render(){

    return ();

}

constructor初始化

react用this.setState 往里面赋值

关于 js 中 this 的难点参考~https://www.cnblogs.com/long-long/p/6741083.html

React 中规定在循环标签的时候，标签内要添加 key 属性，且 key 值不能一样，所以一般值设为循环项的索引值

React 避免 Dom 操作，主要是面向数据操作：

定义 state (组建中存放数据的地方)

constructor( props ){

    super ( props );

    this.state.list [

        ......

    ]

}

然后在视图标签中的写入 { js 表达式（用 map 循环定义中的数据）} 

import React,{ Component } from 'react';

class TodoList extends Component{

handlerClick(){

this.setState({

list:[...this.state.list,'1']

})

//this.state.list.push('1');

}

//构造器

constructor(props){

super(props);

this.state={

list:[

'learn react',

'learn english',

'learn vue'

]

}

}

render(){

return(

<div>

<div>

<input/>

<button onClick={this.handlerClick.bind(this)}>add</button>

</div>

<ul>

{

this.state.list.map((item,index)=>{

return <li key={index}>{item}</li>

})

}

</ul>

</div>

);

}

}

export default TodoList;