React全家桶（二）

课程内容

1、React基础

2、React Hooks

3、React路由

4、React Redux

5、组件库

6、Immutable

7、Mobx

8、React+TS

9、单元测试

10、dva+umi

---

五、组件的数据挂载方式

1、状态（state）

import React, { Component } from 'react'


export default class app extends Component {

  a = 1
  // state = {
  //   myShow:true
  // }
  constructor(){
    super()
    this.state = {
      mytext:"收藏",
      myName:"小明",
      myShow:true,
    }
  }

  render() {
    return (
      <div>
        <h1>欢迎来到react开发-{this.state.myName}</h1>
        <button onClick={
          ()=>{
            this.setState({
              myShow:!this.state.myShow,
              myName:"小李"
            })
            if(this.state.myShow){
              console.log("收藏的逻辑");
            }else{
              console.log("取消收藏的逻辑");
            }
          }
        }>{this.state.myShow?'收藏':'取消收藏'}</button>
      </div>
    )
  }
}

2、列表渲染和key值解析

import React, { Component } from 'react'

export default class App extends Component {

    state = {
        list:[{
            id:1,
            text:"1111"
        },{
            id:2,
            text:"2222"
        },{
            id:3,
            text:"3333"
        }]
    }

    render() {
        // let newlist = this.state.list.map(item => <li>{item}</li>)
        return (
            <div>
                {
                    this.state.list.map((item,index) => 
                    <li key={item.id}>{item.text}--{index}</li>)
                }
            </div>
        )
    }
}
/*
    为了列表的复用和重排，设置key值，提高性能
    
    理想值item.id

    不涉及到列表的增加、删除、重排，设置成索引没有问题
*/


/*
    原生js - map映射
*/
var list = ["aa","bb","cc"]

var newlist = list.map(item => `<li>${item}</li>`)
console.log(newlist.join(""));

3、todolist案例(1)

import React, { Component } from 'react'

export default class root extends Component {

  a = 100
  myref = React.createRef()

//   state = {
//     list:['aa','bb','cc']
//   }

state = {
    list:[{
        id:1,
        mytext:"aa"
    },{
        id:2,
        mytext:"bb"
    },{
        id:3,
        mytext:"cc"
    },]
  }

  render() {
    return (
      <div>
        {/* <input ref="mytext"/> */}
        <input ref={this.myref}/>
        <button onClick={this.handleClick}>add</button>
        <ul>
            {
                this.state.list.map(item=>
                <li key={item.id}>{item.mytext}</li>
                )
            }
        </ul>
      </div>
    )
  }

  handleClick = ()=>{
    // console.log(this.refs.mytext.value);
    console.log(this.myref.current.value);

    //不要直接修改状态，可能会造成不可预期的问题
    // this.state.list.push(this.myref.current.value)

    let newlist = [...this.state.list] //或者 let newlist = this.state.list.slice()
    newlist.push({
        id:Math.random()*100000000,
        mytext:this.myref.current.value
    })
    this.setState({
        list:newlist
    })
  }

}

4、todolist案例(2)删除和条件渲染

import React, { Component } from 'react'
import "./css/01-index.css"
export default class root extends Component {

  a = 100
  myref = React.createRef()

//   state = {
//     list:['aa','bb','cc']
//   }

state = {
    list:[{
        id:1,
        mytext:"aa"
    },{
        id:2,
        mytext:"bb"
    },{
        id:3,
        mytext:"cc"
    },]
  }

  render() {
    return (
      <div>
        {/* <input ref="mytext"/> */}
        <input ref={this.myref}/>
        <button onClick={this.handleClick}>add</button>
        <ul>
            {
                this.state.list.map((item,index)=>
                <li key={item.id}>
                  {item.mytext}
                  <button onClick={()=>this.handleDelClick(index)}>删除</button>
                  </li>
                )
            }
        </ul>

        {/* {this.state.list.length? null : <div>暂无数据</div>} */}
        {/* {this.state.list.length===0 && <div>暂无数据</div>} */}
        <div className={this.state.list.length===0 ? '' : 'hidden'}>暂无数据</div>
      </div>
    )
  }

  handleClick = ()=>{
    // console.log(this.refs.mytext.value);
    console.log(this.myref.current.value);

    //不要直接修改状态，可能会造成不可预期的问题
    // this.state.list.push(this.myref.current.value)

    let newlist = [...this.state.list] //或者 let newlist = this.state.list.slice()
    newlist.push({
        id:Math.random()*100000000,
        mytext:this.myref.current.value
    })
    this.setState({
        list:newlist
    })
  }

  handleDelClick(index){
    let list = this.state.list.slice()
    list.splice(index,1)
    this.setState({
      list:list
    })
  }

}

5、dangerouslySetInnerHTML：标签显示富文本

import React, { Component } from 'react'
import "./css/01-index.css"
export default class root extends Component {

  a = 100
  myref = React.createRef()

//   state = {
//     list:['aa','bb','cc']
//   }

state = {
    list:[{
        id:1,
        mytext:"aa"
    },{
        id:2,
        mytext:"bb"
    },{
        id:3,
        mytext:"cc"
    },]
  }

  render() {
    return (
      <div>
        {/* <input ref="mytext"/> */}
        <input ref={this.myref}/>
        <button onClick={this.handleClick}>add</button>
        <ul>
            {
                this.state.list.map((item,index)=>
                <li key={item.id}>
                  <span dangerouslySetInnerHTML={
                    {
                      __html:item.mytext
                    }
                  }></span>
                  <button onClick={()=>this.handleDelClick(index)}>删除</button>
                </li>
                )
            }
        </ul>

        {/* {this.state.list.length? null : <div>暂无数据</div>} */}
        {/* {this.state.list.length===0 && <div>暂无数据</div>} */}
        <div className={this.state.list.length===0 ? '' : 'hidden'}>暂无数据</div>
      </div>
    )
  }

  handleClick = ()=>{
    // console.log(this.refs.mytext.value);
    console.log(this.myref.current.value);

    //不要直接修改状态，可能会造成不可预期的问题
    // this.state.list.push(this.myref.current.value)

    let newlist = [...this.state.list] //或者 let newlist = this.state.list.slice()
    newlist.push({
        id:Math.random()*100000000,
        mytext:this.myref.current.value
    })
    this.setState({
        list:newlist
    })
  }

  handleDelClick(index){
    let list = this.state.list.slice()
    list.splice(index,1)
    this.setState({
      list:list
    })
  }

}