react(todoList)

react主要是组件化管理，写法上都是使用jsx，将代码渲染到页面上也是通过render函数，通过虚拟dom的patch将vNode渲染到页面上

1、首次创建todoList:

• state:state相当于vue中的data，通过操作state来更新界面数据
• setState:没有办法实现vue的响应式，通过setState手动更改state数据状态
• this指向:需要搞清楚this到底指向的是哪个作用域以及箭头函数this指向
• 封装后的组件需要export导出将其暴露（export default导出import引入无需添加{}）
• 组件{Component}或者React.Component,组件名必须要大写

import React,{Component} from 'react';
class App extends Component {
  constructor(){
    super();   
   this.state={
    list:['123','456'],
    inputValue:''
   }
  }
  buttonClick(){
    this.setState({
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })  
  }
  inputChange(e){
    this.setState({
      inputValue:e.target.value
    })
  }
  handleDelete(index){
   const list=[...this.state.list]
   list.splice(index,1)
   this.setState({
    list:list
   })
  }
  render(){
    return (
      <div >
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}></input>
        <button onClick={this.buttonClick.bind(this)}>提交</button>
        <ul>
          {
            this.state.list.map((item,index)=>{
              return (<li onClick={this.handleDelete.bind(this,index)} key={index}>{item}</li>)
            }
            )}
        </ul>
      </div>
    )
  }
  
}
export default App;

2、通过父子组件传值实现todoList

• 父—>子传值：  父组件内引入子组件标签，并在其中定义属性，子组件中通过this.props.属性 获取到对应父元素state状态值
• 子—>父传值：  父组件在引入子组件便签内定义一个属性，子组件通过定义一个方法将传递参数写在方法函数体内并通过this.props.属性  传递给父组件，父组件在属性方法参数内可以直接调用传递过来的参数并对其操作

///子组件Item
import React,{Component} from 'react';
import ReactDOM from 'react-dom';


class Item extends Component{
    constructor(props){
        super(props)//继承父类this
    }
    indexPrint(index){//点击一次，将点击对象的index传递给父组件，父组件根据index值删除相应item
        this.props.delete(index)//通过this.props.delete将index参数传递给父组件
    }
    render(){
        return(
            <div>
                <ul>{
                    this.props.list.map((item,index)=>{
                        return (<li key={index} onClick={this.indexPrint.bind(this,index)}>{item}</li>)
                      })  //子组件通过函数方法将index传给父组件
                }
                </ul>        
            </div>    
        )
    }
}
export default Item;
//子组件接收父组件中的list
//子组件将index传递给父组件


/父组件
import React,{Component} from 'react';
import Item from './Item'
class App extends Component {
  constructor(){
    super();   
   this.state={
    list:['123','456'],
    inputValue:''
   }
  }
  buttonClick(){
    this.setState({
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })  
  }
  inputChange(e){
    
    this.setState({
      inputValue:e.target.value
    })
  }
  handleDelete(index){//接收到子组件内传来的index值
   const list=[...this.state.list]
   list.splice(index,1)
   this.setState({
    list:list
   })
  }
  render(){
    return (
      <div >
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}></input>
        <button onClick={this.buttonClick.bind(this)}>提交</button>
        <div>
          {
            //父组件接收到子组件传过来的值后并通过handleDelete方法进行删除操作*
           <Item list={this.state.list} delete={this.handleDelete.bind(this)}></Item>
          } 
        </div>
      </div>
    )
  }
  
}
export default App;
//当input框内文字输入进去过后，点击提交按钮提交到list里头去

3、结合redux实现todoList

• store是核心库
• 组件component想要执行函数对store内部数据进行操作，需要经过一个actionCreator（组件想要对store进行什么操作的定义）
• action中定义了组件想要对store进行什么类型（type，并将需要参数传入）的操作，通过一个store.dispatch（action）传递store
• store接收到action传来的想要做何种操作的对象（state,action），先从reducer中查找是否保存有action对象的类型属性action.type，如果有，按照action要求的操作进行数据修改并将对应newState返回给store，store通过store.subscribe(方法) 监听state是否变化
• store执行完相关操作后将新数据返回给组件component=>this.setState(store.getState())

//APP.js
import React,{Component} from 'react';
import {createStore} from 'redux'
import Item from './Item' 
import {store} from './store/store'
import{ADD_VALUE,DELETE_VALUE}from './store/action-type'
class App extends Component {
  constructor(){
    super();   
   this.state=store.getState()
   store.subscribe(this.change.bind(this))//store通过subscribe来监听state的变化
  }
   change(){
     this.setState(store.getState())//store通过组件的setstate方法将store中的数据getState给组件
  }
  buttonClick(){
    const action={
      type:'ADD_VALUE'
    }
    store.dispatch(action)
  }
  inputChange(e){
    const action={
      type:'value_changed',
      value:e.target.value//input框内文字变化，组件想做的事情就是我要更改input框内的数字，想要改变的值是e.target.value
    }  
   store.dispatch(action)//组件通过dispatch方法将想做的事情action传递给store
  }
  handleDelete(index){//接收到子组件内传来的index值
   const action={
     type:'DELETE_VALUE',
     value:index
   }
   store.dispatch(action)
  }
  render(){
    return (
      <div >
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}></input>
        <button onClick={this.buttonClick.bind(this)}>提交</button>
        <div>
          {
            //父组件接收到子组件传过来的值后并通过handleDelete方法进行删除操作*
           <Item list={this.state.list} delete={this.handleDelete.bind(this)}></Item>
          } 
        </div>
      </div>
    )
  }
  
}
export default App;
//当input框内文字输入进去过后，点击提交按钮提交到list里头去



//store.js
import {createStore} from 'redux'
import {reducer} from './reducer'

export const store=createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())//store获取reducer仓库权限x

//reducer.js

const defaultSate={
    inputValue:'',
    list:[]
}
export const reducer=(state=defaultSate,action)=>{
    if(action.type==="value_changed"){
        const newState=JSON.parse(JSON.stringify(state));
        newState.inputValue=action.value
        return newState
    }
    if(action.type==="ADD_VALUE"){
        const newState=JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue)
        newState.inputValue=""
        return newState
    }
    if(action.type==='DELETE_VALUE'){
        const newState=JSON.parse(JSON.stringify(state));
        newState.list.splice(action.value)
        return newState
    }
    return state
}