React学习之 创建组件_绑定属性_引入图片_改变this指向等总结

(一) React 创建组件、绑定属性( 绑定class 绑定style)、引入图片 循环数组渲染数据

1. 所有的模板要被一个根节点包含起来
2. 模板元素不要加引号
3. {}绑定数据
4. 绑定属性注意：

   class 要变成 className

   for 要变成 htmlFor （因为class和for 为JS中的关键字）

   style属性和以前的写法有些不一样

   <div color':'blue'}}>{this.state.title}</div>
   
   <div color':this.state.color}}>{this.state.title}</div>

5. 循环数据要加key （注: map(value,key) value和key 要先写value ）
6. 组件的构造函数中一定要注意 super
   1. 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象

   2. constructor(props){
              super(props);  /*用于父子组件传值  固定写法*/
              this.state={
                  userinfo:'张三'
              }
          }

　　7. 组件名称首字母大写、组件类名称首字母大写

(二) React定义方法的几种方式 获取数据 改变数据 执行方法传值

　　在以类继承的方式定义的组件中，为了能方便地调用当前组件的其他成员方法或属性（如：this.state），通常需要将事件处理函数运行时的 this 指向当前组件实例。

　　绑定事件处理函数this的三种方法：

1. 第一种方法： 在点击事件上绑定this

   run(){
             alert(this.state.name)
        }
   <button onClick={this.run.bind(this)}>按钮</button> 

2. 第二种方法 构造函数中进行绑定this

   　　 构造函数中改变
   
       this.run = this.run.bind(this);
   
   
        run(){
               alert(this.state.name)
        }
   <button onClick={this.run>按钮</button>

3. 第三种方法 箭头函数绑定this（常用的）

    run=()=> {
               alert(this.state.name)
         }
   
    <button onClick={this.run>按钮</button>

　　选择苦挨 放逐他漂流人海

　　　　　　　　　　　　--失语者