React 进阶使用

目录

children属性

props校验-场景和使用

组件生命周期

todoMvc

---

 

children属性

表示该组件的子节点，只要组件内部有子节点，props中就有该属性

import React from 'react'
// 渲染列表
function ListItem ({ children }) {
  // children()
  return (
    <div>
      item,{children.map(item=>item)}
    </div>
  )
}
// 数据提供者，渲染ListItem组件
class App extends React.Component {
  render () {
    return (  
      <div>
        <ListItem>
          {/* <div>
            child
          </div> */}
          {/* 函数 */}
          {/* {()=>console.log(123)} */}
          <div>
            div
          </div>
          <p>p</p>
        </ListItem>
      </div>
    )
  }
}


export default App

props校验-场景和使用

1. 安装属性校验包：yarn add prop-types
2. 导入prop-types 包
3. 使用 组件名.propTypes = {} 给组件添加校验规则

import React from 'react'
import PropTypes from 'prop-types'
// 渲染列表
// 函数参数默认值（推荐方案）
function ListItem ({ list,pageSize = 10 }) {
  // children()
  return (
    <div>
      {list.map(item => <p>{item}</p>)}
      {pageSize}
    </div>
  )
}
// 类组件
class Test extends React.Component{
  // static 类静态属性定义（推荐方案）
  static defaultProps = {
    pageSize:40
  }
  render() {
    return (
      <div>
        {this.props.pageSize}
      </div>
    )
  }
}
// Test.defaultProps = {
//   pageSize:10
// }
ListItem.propTypes = {
  //  定义规则 
  // 限定list类型
  // list:PropTypes.array
  // 必填项
  list:PropTypes.array.isRequired
}
// props默认值
// ListItem.defaultProps = {
//   pageSize:10
// }
// 数据提供者，渲染ListItem组件
class App extends React.Component {
  render () {
    return (  
      <div>
        <ListItem list={[1,2,3,4]} pageSize={20} />
        <Test pageSize={30} />
      </div>
    )
  }
}


export default App

组件生命周期

组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程，注意，只有类组件才有生命周期（类组件 实例化  函数组件 不需要实例化）

import React from 'react'
class TextDel extends React.Component{
  // 如果数据是组件的状态需要影响视图，定义到state中
  // 如果不和视图绑定，定义为普通实例属性
  // state中保持精简
  timer = null
  componentDidMount (){
    this.timer = setInterval(() => {
      console.log('4564');
    }, 1000);
  }
  componentWillUnmount (){
    console.log('componentWillUnmount');
    // 清理定时器
    clearInterval(this.timer)
  }
  render (){
    return <div>
      TextDel
    </div>
  }
}
class App extends React.Component {
  constructor() {
    super()
    console.log('constructor')
  }
  state = {
    count:0,
    flag:true
  }
  clickHander = ()=>{
    this.setState({
      count:this.state.count+1,
      flag:!this.state.flag 
    })
  }
  componentDidMount () {
    console.log('componentDidMount')
    // 发送请求 类似 mounted
  }
  componentDidUpdate (){
    console.log('componentDidUpdate');
  }
  render () {
    console.log('render')
    return (
      <div>
        div
        {/* 通过数据状态的切换，让组件进行销毁重建，就会发生组件卸载 */}
        {this.state.flag ? <TextDel /> : null}
        <button type="" onClick={this.clickHander}>{this.state.count}</button>
      </div>
    )
  }
}


export default App

todoMvc

1. 对应组件搭建页面
2. table渲染，（发送请求（componentDidMount），拿到数据，交给list（this.setState））
3. 删除功能，调用删除接口，重新拉取列表
4. 搜索功能，拿到关键词，调用接口获取列表数据 

import { Input, Button, Table, Space, Popconfirm } from 'antd'
import React from 'react'
import './App.css'
import axios from 'axios'

const { Search } = Input

class App extends React.Component {
  state = {
    list: [],
    columns: [
      {
        title: '任务编号',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '任务名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '任务描述',
        dataIndex: 'des',
        key: 'des',
      },
      {
        title: '操作',
        dataIndex: 'do',
        key: 'do',
        render: (_, record) => (
          <Space size="middle">
            <Popconfirm title="确定要删除吗?"
              onConfirm={() => this.delData(_, record)}>
              <a href="#">删除</a>
            </Popconfirm>
          </Space>
        ),
      },
    ]
  }

  // 搜索
  onSearch = async (value) => {
    console.log(value)
    // 搜索接口
    const res = await axios.get(`http://localhost:3001/data/?q=${value}`)
    this.setState({
      list:res.data
    })
  }
  // 删除
  delData = async(_, record)=>{
    console.log(_, record);
    // 调用删除接口
    await axios.delete(`http://localhost:3001/data/${record.id}`)
    this.loadList()
  }
  // 加载列表
  loadList = async () => {
    const res = await axios.get('http://localhost:3001/data')
    console.log(res)
    this.setState({
      list: res.data
    })
  }
  componentDidMount () {
    this.loadList()
  }

  render () {
    return (
      <div className="container">
        {/* 搜索框 */}
        {/* onSearch点击搜索图标、清除图标，或按下回车键时的回调 */}
        <Search
          placeholder="input search text"
          allowClear
          enterButton="Search"
          size="large"
          onSearch={this.onSearch}
        />
        {/* table表格组件,依赖必要数据，定义列，遍历渲染 */}
        <Table dataSource={this.state.list} columns={this.state.columns} />
      </div>
    )
  }
}

export default App