import React from 'react';

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

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

      }

      //修改state用setState；
      handleBtnClick(){
          this.setState({
              list:[
                  ...this.state.list,//...:数组展开符；
                  this.state.inputValue
              ],
              inputValue:''//为了让点击后input值清空；
          });
      }

      //监听input值变化；
      handleBtnChange(e){
          this.setState(
              {
                  inputValue:e.target.value //获取变化值；
              }
          );
      }

      //删除点击的列表项；
      handleItemDelet(index){

          //这一步相当于复制list（即副本）；在React中对state数据进项操作时，建议对副本操作，提高代码可调实性；
          const list = [...this.state.list];
          list.splice(index,1);
          this.setState({
              list    //list : list的简化，当key=value时可简化；
          })


      }
    render(){
      return (
          <div>
              <div>
                  <input value={this.state.inputValue} onChange={this.handleBtnChange.bind(this)}></input>
                  <button onClick={this.handleBtnClick.bind(this)}>add</button>
              </div>
              <ul>
                  {this.state.list.map((item,index)=>{    //循环list；
                      return <li key={index} onClick={this.handleItemDelet.bind(this,index)}>{item}</li>
                  })}
              </ul>
          </div>
      );
    }
}


export default ToDoList;

import React from 'react';

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

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

      }

      //修改state用setState；
      handleBtnClick(){
          this.setState({
              list:[
                  ...this.state.list,//...:数组展开符；
                  this.state.inputValue
              ],
              inputValue:''//为了让点击后input值清空；
          });
      }

      //监听input值变化；
      handleBtnChange(e){
          this.setState(
              {
                  inputValue:e.target.value//获取变化值；
              }
          );
      }
    render(){
      return (
          <div>
              <div>
                  <input value={this.state.inputValue} onChange={this.handleBtnChange.bind(this)}></input>
                  <button onClick={this.handleBtnClick.bind(this)}>add</button>
              </div>
              <ul>
                  {this.state.list.map((item,index)=>{//循环list；
                      return <li key={index}>{item}</li>
                  })}
              </ul>
          </div>
      );
    }
}


export default ToDoList;

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;

React.Fragment  等价于导入的Fragment

组件最外层的div可以使用 React.Fragment元素代替，在渲染时不会显示最外层标签。

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

jsx中只能写表达式不能写语句，此写法错误。

react Fiber 是react Fiber之后的版本统称

第一步： 安装 node  

第二步 ：利用脚手架 创建项目 npx create-react-app todolist

第三步：进入 todolist 文件后 运行项目 npm start

react fiber  是指 react 16之后的版本所对应的 react ，对底层的核心算法进行了改良，引入了一些优先级的概念等，使代码运行的更加流畅

jsx中的花括号中只能写表达式，而不能写语句。

// 父组件通过属性的形式向子组件传递参数

// 子组件通过props接口父组件参数

React.Fragment 忽略render中的最外层外套

React学习官网：

    https://reactjs.org/

            docs

            tutorial