react-2

react新的编程思想feacebook 2003年5月推出。
react.filber是指16版本后
react与vue区别：
react更适合复杂度高的
vue更好上手 `在这里插入代码片`
**

• 组件化定义

  import React from 'react';
    // function App() {
    //   return (
    //     <div>
    //         hello,word
    //     </div>
    //   );
    // }
    class App extends React.Component {
        render() {
        //注意div换行会报错
       // 如果要换行 可以写成
       //return（
       //    <div>
       //        hello word
       //     </div>
      //  ）
            return <div>
                hello word
            </div>
        }
    
    }
    
    export default App;

return必须返回一个元素 这时可以引用Fragment 占位符

import React,{Component,Fragment}from 'react'
// Fragment站位符
class TodoList extends Component{
    render(){
        return (
            <Fragment>
                <input type="text"/><button>提交</button>
            </Fragment>
        )
    }
}
// function TodoList() {
//     return (
//         <Fragmnet>
//             <input type="text"/><button>提交</button>
//         </Fragmnet>
//     )
// }

export default TodoList;

绑定变量以及绑定函数

1. state以及poprs的变量只读不可直接更改
2. 函数的this指向问题 以及传参的问题
3. 以及绑定函数、绑定变量的方法

import React,{Component,Fragment}from 'react'
// Fragment站位符
class TodoList extends Component{
    constructor(poprs){//构造函数
     super(poprs);//调用Component的钩子
     this.state={//state的变量只读不可直接更改
         inputValue:'',
         list:['学习英文','学习数字']
     }
    }
    render(){
        return (
            <Fragment>
                <div>
                    <input type="text"
                           value={this.state.inputValue}
                    //  .bind(this)改变this指向
                           onChange={this.handleInputChange.bind(this)}
                    />
                    <button onClick={this.handleButtonClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            // map循环时：每一项都应该有个key值 且唯一
                           return (
                               <li
                                   key={index}
                                   onClick={this.handleDelList.bind(this,index)}
                               >
                                   {item}
                               </li>
                           )
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    handleInputChange(e){
     this.setState({
         inputValue:e.target.value
     })
    }
    handleButtonClick(){
      this.setState({
          //...this.state.list是es6中的展开运算符 保留以前的元素形成新的数组
          //展开预算符且尾部添加新的元素
          list:[...this.state.list,this.state.inputValue],
          inputValue:''
      })
    }
    handleDelList(index){
        var list=[...this.state.list]
        list.splice(index,1)
        this.setState({
            list:list
        })
    }
}

export default TodoList;