React学习打卡Day2

1.事件绑定，在标签内用onClick等方式实现事件绑定
        1）使用箭头函数实现，在语句最后不需要加（），react事件系统程序在执行时会自动添加，如果处理逻辑过多，不推荐这种写法
        2）使用函数调用实现，函数调用使用this，在语句最后不需要加（）
        3）使用函数调用实现，外部函数使用箭头函数构造，在语句最后不需要加（）
        4）使用箭头函数实现，外部函数构造方式随意，但在箭头函数内部调用时函数需加（），可以在内部调用多个函数，比较推荐
        推荐使用第四种的变形，利于传参，<button onClick={()=>this.handleClick4()}></button>

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
    a = 100;
    render() {
        return (
            <div>
                <input></input>
                <button onMouseOver={()=>{
                    console.log("click1","如果处理逻辑过多，不推荐这种写法",this.a);
                }}>add1</button>
                <button onClick={this.handleClick2.bind(this)}>add2</button>//这里必须使用bind，因为call和apply会自动添加括号，无法触发react事件系统机制
                <button onClick={this.handleClick3}>add3</button>
                <button onClick={()=>{
                    this.handleClick4();
                }}>add4</button>
            </div>
        )
    }
    handleClick2(){
        console.log("click2",this);
    }
    handleClick3 = ()=>{
        console.log("click3",this.a);
    }
    handleClick4(){
        console.log("click4",this.a);
    }
}
/*
    call，改变this，自动执行函数
    apply，改变this指向，自动执行函数
    bind，改变this指向，不自动执行函数，手动加（）执行函数
*/
var obj1 = {
    name:"obj1",
    getName(){
        console.log(this.name)
    }
}
var obj2 = {
    name:"obj2",
    getName(){
        console.log(this.name)
    }
}
obj1.getName.call(obj2);
obj2.getName.bind(obj1)();

2.call，apply，bind，在标签内的事件绑定只能用bind绑定函数，因为bind不会自动执行
        call，改变this，自动执行函数，系统无法再加括号
        apply，改变this指向，自动执行函数，系统无法再加括号
        bind，改变this指向，不自动执行函数，手动加（）执行函数，系统可以自动加

3.ref的两种方式
        1）标签内使用ref=“任意名字”，事件中使用this.refs.任意名字，获取标签对象
        2）在外部定义myref = React.createRef()，标签内使用ref={this.myref}，事件中使用this.myref.current，获取标签对象，该模式可以在严格模式下使用

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
    myref = React.createRef();
    render() {
        return (
            <div>
                {/* <input ref="mytext"></input> */}
                {/* <button onClick={()=>{
                    console.log("click1",this.refs.mytext.value); */}
                {/* }}>add1</button> */}
                <input ref={this.myref}></input>
                <button onClick={()=>{
                    console.log("click1",this.myref.current.value);
                }}>add1</button>
            </div>
)}}

4.状态state
        1）在react中，不允许用户直接修改DOM状态，通过代理修改，采用state实现
        1）在react中，使用state来表示对象的属性，采用键值对的形式存放
        2）采用this.state.对象名来获取对象的值，采用this.setState({对象名：新值)}来动态更新值

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
    state={
        mytext:"收藏",
        myShow:true
    }
    render() {
        //var text = "收藏"
        return (
            <div>
                <h1>欢迎来到react开发</h1>
                <button onClick={()=>{
                    //this.state.mytext = "取消收藏"//不要直接修改状态
                    this.setState({
                        //mytext:"取消收藏"
                        myShow:!this.state.myShow
                    })//间接修改状态
                    if(this.state.myShow){
                        console.log("收藏的逻辑");
                    }else{
                        console.log("取消收藏的逻辑");
                    }
                }}>{this.state.myShow?'收藏':'取消收藏'}</button>
            </div>
        )}}

 5.循环渲染和key值的使用
        循环旋绕：使用js中的map方式，但是要注意写法规范
        key值使用：
        1） 为了列表的复用和重排，设置key值，提高性能
        2）理想key，设置为item.id
        3）如果不涉及列表的增加删除重排，设置成索引也是安全的

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
    /*state={
        list:[{
            id:1,
            text:"1111"
        },{
            id:2,
            text:"2222"
        },{
            id:3,
            text:"3333"
        }]
    }*/
    state={
        list:["1111","2222","3333"]
    };
    render() {
        return (
            <div>
                <ul>
                    {/* {
                        this.state.list.map(item=>
                        <li key={item.id}>{item.text}</li>)} */}
                    {
                        this.state.list.map((item,index)=>
                        <li key={index}>{item}</li>)
                    }
                </ul>
            </div>
        )}}
/*
    为了列表的复用和重排，设置key值，提高性能
    理想key，设置为item.id
    如果不涉及列表的增加删除重排，设置成索引也是安全的
*/
/*
原生js - map
*/
var list =["aa","bb","cc"];
var newlist = list.map(item=>`<li>${item}</li>`);
console.log(newlist.join(""));