React 组件创建及改变This指向三种方式

最新推荐文章于 2024-06-26 18:20:49 发布

c_w_n

最新推荐文章于 2024-06-26 18:20:49 发布

阅读量227

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/c_w_n/article/details/128002881

版权

特点：可复用、独立、可组合

组件创建的两种方式

1.使用函数创建组件

函数名称必须以大写字母开头
函数组件必须有返回值，表示该组件的结构
如果返回值为 null，表示不渲染任何内容

// 创建函数组件
function Hello(){
    return (
        <div>这是我的第一个函数组件</div>
    )
}

// 不渲染结构：
function Hello() {
 // 函数内部如果不返回任何值，需要返回 null
   return null
}

// 使用箭头函数创建组件：
const Hello = () => <div>这是我的第一个函数组件</div>

// 渲染组件
ReactDOM.render(<Hello />, document.getElementById('root'))

2.使用类创建组件

类组件 : 使用ES6的class创建的组件

类名称也必须以大写字母开头
类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性
类组件必须提供 render() 方法
render() 方法必须有返回值，表示该组件的结构

// 创建类组件
class Hello extends React.Component{
    render() {
        return (
            <div>这是我的第一个类组件</div>
        )
    }
}

// 渲染组件
ReactDOM.render(<Hello />, document.getElementById('root'))

抽离为独立 JS 文件

// Hello.js 中
import React from 'react'

// 创建组件
class Hello extends React.Component {
  render() {
    return (
      <div>这是我的第一个抽离到js文件中的组件</div>
    )
  }
}

// 导出组件
export default Hello





// index.js 中
import React from 'react'
import ReactDOM from 'react-dom'

/* 
  抽离组件到独立的JS文件中
*/

// 导入Hello组件
import Hello from './Hello'

// 渲染组件
ReactDOM.render(<Hello />,  document.getElementById('root'))

事件处理

1.事件绑定

语法： on + 事件名称 = {事件处理程序}，例如： onClick = { () => {} }
注意： React 事件采取驼峰命名法，比如： onClick、onMouseEnter
注意：在类组件和函数中调用函数的方式是不同的
- 在类组件中调用方法需要使用 this.方法
- 在函数组件中调用方法直接触发 方法 即可

// 类组件绑定事件：

import React from 'react'
export default class App extends React.Component {
  handle() {
    console.log('单击事件触发成功')
  }

  render() {
    return (
      // 在类组件中调用方法需要使用 `this.方法`
      <button onClick={this.handle}>触发事件</button>
    )
  }
}




// 函数组件绑定事件：

import React from 'react'
function App() {
  function handle () {
    console.log('我是函数组件的方法')
  }

  return (
    // 直接调用方法的名称即可
    <button onClick={handle}>触发方法</button>
  )
}



export default App

2.事件对象

import React from 'react'

export default class App extends React.Component {
  handle(e) {
    // 阻止浏览器默认行为
    e.preventDefault()
    console.log('单击事件触发成功')
  }

  render() {
    return (
      <a href="http://www.baidu.com" onClick={this.handle}>触发事件</a>
    )
  }
}

有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件
所谓的状态实际上就是数据
函数组件没有自己的状态，只负责数据展示
类组件有自己的状态，负责更新 UI，让页面 “动起来”
有状态组件和无状态组件的区别就是有没有自己的私有数据，即能不能定义 state

State 的使用

状态(state) 即数据，
状态是组件内部的私有数据，只能在组件内部使用
state 的值是对象，表示一个组件中可以有多个数据
使用 this.state.xxx 获取 state 中的数据

// 第一种声明方式
export default class App extends React.Component{
  // 在 constructor 内部声明 state
  constructor() {
    super()
    this.state = {
      name:'亚瑟'
    }
  }
  render() {
    return null
  }
}

// 第二种声明方式
export default class App extends React.Component{
  // 简化语法
  state = {
    name : '诸葛'
  }
  render() {
    return (
      <div>获取并使用state： {this.state.name}</div>
    )
  }
}

setState 修改数据

state 状态是可以变化的，即可以修改的
语法: this.setState({ 要修改的数据 })
注意：不要直接修改 state 中的值，这种做法是错误的！
steState() 的作用:
- 修改 state 数据
- 更新 UI
使用 staState 修改数据，并驱动 UI 更新的做法，叫做 数据更新数据

// 第二种声明方式
export default class App extends React.Component{
  // 简化语法
  state = {
    name: '百里',
    age:9
  }
  addName() {
    this.setState({
      name:this.state.name + '-'
    })
  }
// 利用箭头函数形式的class实例方法
  addAge = () => {
    this.setState({
      age:this.state.age + 1
    })
  }
  // constructor () {
    // super()
    // this.state = {
      // age: 3
    // }
    // 利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起
    // this.addHandle = this.addHandle.bind(this)
  // }
  render() {
    return (
      <div>
      <button onClick={()=>{
        this.setState({
          name:this.state.name +',,'
        })
        }}>更改数据</button>
        {/* 箭头函数的方式改变 this 执行 */}
        <button onClick={() => {
          this.addName
        }}>更改数据</button>
        <button onClick={this.addAge}>更改数据</button>
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
        </div>
    )
  }
}