当前位置： 首页>前端>正文

react常用dependencies react常用组件及作用

前端2024-04-30 23:22:35

用过vue的小伙伴都知道组件的作用 react中的组件也是差不多的作用 接下来我给大家介绍介绍在react中我们应该怎么使用组件

react的组件主要分四类

        基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件

        业务组件：由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框

        区块组件：由基础组件组件和业务组件组合成的UI块

        页面组件：展示给用户的最终页面，一般就是对应一个路由规则

react创建组件有两种方式  一种是函数创建 另一种是class创建

1.函数式:

const Com1 = () => {
  return <div>函数式组件</div>
}

2.类组件:

class Com2 extends React.Component {
  render () {
    return <div>类组件</div>
  }
}

定义组件函数名首字母大写 要写返回值

在需要的地方写标签就可以了 和vue使用大同小异  

const content = (
  <div>
    {<Com1 />}
    <hr />
    {<Com2 />}
  </div>
)

ReactDOM.render(content, document.getElementById('root'))

在react中的组件分为有状态组件和无状态组件  敲黑板

那么什么是状态呢

给的定义是 用来描述事物在谋一时刻的形态的数据 state

而有无状态 则就是能不能定义state的组件了

固定格式 用state={} 里面存放数据

class Com2 extends React.Component {
  state={}
  render () {
    return <div>类组件</div>
  }
}

事件绑定

格式

<元素 事件名1={ 事件处理函数1 } 事件名2={ 事件处理函数2 }  ></元素>

例如

class Hello extends React.Component {
  fn() {
    console.log('mouseEnter事件')
  }
  render() {
    return (
      <div
        onClick={() => console.log('click事件')}
        onMouseEnter={this.fn}
      </div>
    )
  }
}

在事件处理中要注意this的问题 ⭐⭐⭐⭐⭐

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this) // 这里的this是undefined
  }
  render() {
    console.log(this) // 这里的this是实例
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

这是因为class中事件处理程序式严格模式 (use strict) 

this的指向有问题那我们应该怎么写事件处理代码呢 没事我们有解决方法  主要有三种

使用bind改变this指向

<button onClick={this.handleClick.bind(this)}>点我</button>

使用箭头函数改变this指向

<button onClick={() => {this.handleClick()}}>点我</button>

第三种是我常用的方法 也是使用箭头函数改变this指向

<button onClick={this.handleClick}>点我</button>

 handleClick = () => {
    console.log(this.state.msg)
  }

接下来就需要通过事件修改状态了

记住 react的核心理念之状态不可变

不要直接修改状态 而应该创建新状态值

来个小案例 


https://www.xamrdz.com/web/2by1939888.html

相关文章：