03react基础-组件1

2021-05-09 本文已影响0人东邪_黄药师

react组件的创建方式

一.函数创建组件

约定1：函数名称必须以大写字母开头
约定2：函数组件必须有返回值，表示该组件的结构
函数组件：使用JS的函数创建组件
如果返回值为null，表示不渲染任何内容
示例demo
①编写函数组件（普通函数）

import React from 'react'
import ReactDOM from 'react-dom'

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

利用ReactDOM.render()进行渲染

ReactDOM.render(<Hello />, document.getElementById('root'))

②使用箭头函数创建组件

import React from 'react'
import ReactDOM from 'react-dom'
// 使用箭头函数创建组件：
const Hello = () => <div>这是我的第一个函数组件</div>
// 渲染组件
ReactDOM.render(<Hello />, document.getElementById('root'))

二.使用类创建组件

使用ES6语法的class创建的组件
约定1：类名称也必须要大写字母开头
约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
约定3：类组件必须提供 render 方法
约定4：render方法中必须要有return返回值

import React from 'react'
import ReactDOM from 'react-dom'
// 创建类组件
class Hi extends React.Component {
  render () {
 // 创建class类，继承React.Component，在里面提供render方法，在return里面返回内容
    return (
      <h1>1234</h1>
    )
  }
}
// 渲染组件
ReactDOM.render(<Hi />, document.getElementById('root'))

抽离成单独的JS文件

示例demo

创建Hello.js
1.在Hello.js 中导入React，创建组件，在Hello.js中导出

import React from 'react'
// 1.创建组件
class Hello extends React.Component {
  render() {
    return (
      <div>这是我的第一个抽离到js文件中的组件</div>
    )
  }
}
// 2.导出组件
export default Hello

2.在index.js中导入Hello组件，渲染到页面

import Hello from './js/Hello'
ReactDOM.render(<Hello />,document.getElementById('root'))

事件

事件绑定

React事件绑定语法与DOM事件语法相似
语法：on+事件名称=事件处理函数，比如 onClick = function(){}
注意：React事件采用驼峰命名法
demo1.类组件的事件

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  // 事件处理程序
  handleClick() {
    console.log('单击事件触发了')
  }
  render() {
    return (
      <button onClick={this.handleClick}>点我，点我</button>
    )
  }
}
// 渲染组件
ReactDOM.render(<App />,  document.getElementById('root'))

demo2:通过函数组件绑定事件:

import React from 'react'
import ReactDOM from 'react-dom'
// 通过函数组件绑定事件：
function App() {
  // 事件处理程序
  function handleClick() {
    console.log('函数组件中的事件绑定，事件触发了')
  }

  return (
    <button onClick={handleClick}>点我</button>
  )
}
// 渲染组件
ReactDOM.render(<App />,  document.getElementById('root'))

在React中绑定事件与原生很类似
需要注意点在于，在React绑定事件需要遵循驼峰命名法
类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this

事件对象

可以通过事件处理函数的参数获取到事件对象
React中的事件对象叫做：合成事件
合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
如果你想获取到原生事件对象，可以通过 nativeEvent 属性来进行获取

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  handleClick(e) {
    // 阻止浏览器的默认行为
    e.preventDefault()
    console.log('a标签的单击事件触发了')
  }
  render() {
    return (
      <a href="http://baidu.com/" onClick={this.handleClick}>打开百度</a>
    )
  }
}
// 渲染组件
ReactDOM.render(<App />,  document.getElementById('root'))

有状态组件和无状态组件

函数组件又叫做 无状态组件，类组件又叫做 有状态组件
状态(state)即数据
函数组件没有自己的状态，只负责数据展示
类组件有自己的状态，负责更新UI，让页面动起来
image.png

State和SetState

state基本使用

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

export default class extends React.Component {
    constructor(){
        super()

        // 第一种初始化方式
        this.state = {
            count : 0
        }
    }
    // 第二种初始化方式
    state = {
        count:1
    }
    render(){
        return (
            <div>计数器 :{this.state.count}</div>
        )
    }
}

setState() 修改状态

状态是可变的
语法：this.setState({要修改的数据})
注意：不要直接修改state中的值，这是错误的
setState() 作用：1.修改 state 2.更新UI

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  state的基本使用
*/

class App extends React.Component {
  state = {
    count: 0,
    test: 0
  }

  render() {
    return (
      <div>
        <h1>计数器：{ this.state.count }</h1>
        <h1>计数器：{ this.state.test }</h1>
        <button onClick={() => {
          this.setState({
            count: this.state.count +=3,
            test:this.state.test -=3
          })

          // 错误！！！
          // this.state.count += 1
        }}>+1</button>
      </div>
    )
  }
}

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

image.png

抽取事件处理函数

当我们把上面代码的事件处理程序抽取出来后，会报错，找不到this

image.png

在JSX中我们写的事件处理函数可以找到this，原因在于在JSX中我们利用箭头函数，箭头函数是不会绑定this，所以会向外一层去寻找，外层是render方法，在render方法里面的this刚好指向的是当前实例对象

事件绑定this指向（3种）

1.箭头函数

利用箭头函数自身不绑定this的特点

image.png

2.利用bind方法

利用原型bind方法是可以更改函数里面this的指向的，所以我们可以在构造中调用bind方法，然后把返回的值赋值给我们的函数即可

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  从JSX中抽离事件处理程序
*/

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      count: 0
    }

    this.onIncrement = this.onIncrement.bind(this)
  }
  // 事件处理程序
  onIncrement() {
    console.log('事件处理程序中的this：', this)
    this.setState({
      count: this.state.count + 1
    })
  }
 render() {
    return (
      <div>
        <h1>计数器：{ this.state.count }</h1>
        <button onClick={this.onIncrement}>+1</button>
      </div>
    )
  }
}
// 渲染组件
ReactDOM.render(<App />,  document.getElementById('root'))

3.class的实例方法

利用箭头函数形式的class实例方法
注意：该语法是实验性语法，但是，由于babel的存在可以使用

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  从JSX中抽离事件处理程序
*/

class App extends React.Component {
  state = {
    count: 0
  }

  // 事件处理程序
  onIncrement = () => {
    console.log('事件处理程序中的this：', this)
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <h1>计数器：{ this.state.count }</h1>
        <button onClick={this.onIncrement}>+1</button>
      </div>
    )
  }
}

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