React（1） 关于创建React项目及 基础语法 和React父子组件传值概要 State和Props介绍 this指向

搭建React开发环境

1.安装官方脚手架

npm i -g create-react-app

2.创建项目

 create-react-app 项目名(小写)

3.启动项目

npm start

JSX基础语法

1.XML基本语法

只允许一个标签包裹
标签一定要闭合

2.元素类型

小写首字母对应DOM元素
大写首字母对应组件元素
注释使用js注释方法

3.元素属性

class属性改为className
for属性改为htmlFor
Boolean：省略Boolean属性值会导致JSX认为bool值默认为true

4.js属性表达式

属性值要使用表达式 用 {} 替换 **" "**即可
<input type="text" value={val?val:" "}>

5.this指向

谁调用的this就指向谁。
es6箭头函数指向父层。
大部分你看不出谁调用的都是指向windows的
用ES6 箭头函数 this则不会出现指向问题
ES5 正常函数 可用  .bind(this) 进行 this指向改变 
例：
	 this.handleInputChange = this.handleInputChange.bind(this);
     this.handBtnClick = this.handBtnClick.bind(this);
     this.handleDelete = this.handleDelete.bind(this);
     引用时时直接写  this. 函数名 （函数需定义，正常写即可）

6.state，Props

state：
	state是组件内部的状态（数据），不能够直接修改，
	必须要通过setState来改变值的状态，
	从而达到更新组件内部数据的作用。
props：
	props是指组件间传递的一种方式，props自然也可以传递state。
	由于React的数据流是自上而下的，所以是从父组件向子组件进行传递
	另外组件内部的this.props属性是只读的不可修改！
	组件内可以通过props来获得属性值
State和Props：
	咱们可以通过在父组件当中设置State，
	然后通过在子组件上使用props来接收收父组件的state值。

7.组件传值

父组件通过属性的方式向子组件传递参数
子组件通过props来接收父组件传递过来的参数
子组件通过调用付父组件传给子组件的方法给父组件传值

例：

父组件：

class TodoList extends Component{
	constructor(props){
        super(props);
        this.state={
            List:[],
            inputValue:''
   		 }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handBtnClick = this.handBtnClick.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
    }
     // 按钮
    handBtnClick(){
        this.setState({
            List:[...this.state.List,this.state.inputValue],
            inputValue:''
    	})
	}
	// 输入框
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    // 子组件通过调用付父组件传给子组件的方法给父组件传值
    handleDelete(key){
        const List = [...this.state.List];
        List.splice(key,1);
        this.setState({List})
    }
    getTodoTtems(){
        return(
            this.state.List.map((item,index)=>{
                // 父组件通过属性的方式向子组件传递参数
                return (
                    <TodoItem      // 子组件组件名称
                        Delete={this.handleDelete}
                        key={index}
                        content={item}
                        index={index}
                    />
                )
           })
        )
    }

	render(){
        // JSX语法
        return (
            <div>
                <input value={this.state.inputValue}  onChange={this.handleInputChange} />
                <button onClick={this.handBtnClick}>add</button>
                <ul>{this.getTodoTtems()}</ul>
            </div>
        );
    }
}

子组件：

class TodoItem extends Component{
    constructor(props){
        super(props)
        this.handleDelete = this.handleDelete.bind(this);
    }

    handleDelete(){
        // 子组件通过调用父组件传给子组件的方法给父组件传值
        this.props.Delete(this.props.index)
        console.log(this.props.index)
    }
    render(){
        const { content } = this.porps;
        return(
            // 子组件通过props来接收父组件传递过来的参数
            <li onClick={this.handleDelete}>{content} </li>
        )
    }
}