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

子组件通过 props 接受父组件传递过来的参数

在此过程中 key 属性不可缺

关于 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 循环定义中的数据）} 

什么是 jsx 语法？

在定义的组件中：

1.可以直接返回视图标签不报错。

2.外层必须要有一个根标签包裹着

3.根标签内部可以写 js 表达式，会自动编译，js 语句会报错

4. index.js 中 render 中引用组件时，组件名写在标签符号内。

子组件向父组件传值，子组件调用父组件传递过来的方法，在子组件中写 this.props.方法名(参数)

react父子组件间参数的传递和引用

父组件通过属性的形式向子组件传递数据， 子组件通过props的形式接受父组件的数据。

jsx里只能写表达式，不能写语句。

知识点总结：

1. react 组件都是以大写字母开头，组件就是一个类然后继承 React.Component，就是一个react组件，react 组件中必须有一个 render

2.  jsx: 直接在js中写 html 标签，也可以在在 {} 中写 js 表达式(不能写 js 语句)；

3. react 中的 return 只能返回一个 jsx 也就是说只能有一个父标签；

4.  父组件通过属性的形式向子组件传递参数，子组件通过 props 接收参数；

5. 由于每一个组件中必须有一个根元素，但是处于一些原有不想让其表露出来时，可以用 <React.Fragment></React.Fragment>代替；

6. 简化代码：将jsx 中的 js集中部分单独作为一个函数；在顶部引入

   import React, { Component, Fragment } from 'react'，便可以将后面代码中的  React.Fragment 简化为 Fragment（此标签中不能带类名） ，React.Component简化为 Component；在函数中定义 const {handleDelete,index} = this.props 以后，使用 handleDelete 就相当于 this.props.handleDelete;

7. 一般 bind(this) 写在 constructor 函数中更规范。

父组件向子组件传值，用属性

子组件向父组件传值，用方法

import React,{ Component } from 'react';
class TodoList extends Component{
handlerClick(){
this.setState({
list:[...this.state.list,this.state.inputvalue],
inputvalue:''
})
//this.state.list.push('1');
}
handleInput(e){
this.setState({
inputvalue:e.target.value
});
}
handlerDel(index){
const list=[...this.state.list];
list.splice(index,1);
this.setState({list});
}
//构造器
constructor(props){
super(props);
this.state={
list:[
'learn react',
'learn english',
'learn vue'
],
inputvalue:''
}
}
render(){
return(
<div>
<div>
<input value={this.state.inputvalue} onChange={this.handleInput.bind(this)}/>
<button onClick={this.handlerClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item,index)=>{
return <li key={index} onClick={this.handlerDel.bind(this,index)}>{item}</li>
})
}
</ul>
</div>
);
}
}
export default TodoList;