react组件

react组件介绍

• 组件是最重要的部分，使用react就是在使用组件
• 组件表现的是页面中部分功能
• 组合多个组件实现一个页面
• 特点：可复用、可组合、独立性

使用函数创建组件

函数组件：使用js的函数或者箭头函数创建的组件
约定：

• 函数名称必须（大写开头）
• 函数组件必须有返回值，表示组件的结构
• 如果返回null,表示不展示

function Hello(){
  return (
    <h1 className='title'>
    这是一个组件
  </h1>
  )
}
// const Hello = ()=><h1 className='title'>   这是一个组件 </h1>
ReactDOM.render(
  <Hello/>,
  document.getElementById('root')
);

使用类创建组件

类组件：使用ES6的class创建的组件
约定：

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

//创建类组件
class Hello extends React.Component {
  render(){
    return (
      <div>
        这是一个类组件
      </div>
    )
  }
}
ReactDOM.render(
  <Hello/>,
  document.getElementById('root')
);

组件抽离独立的js文件

• 创建一个Hello.js文件
• 在Hello.js文件中引入React
• 创建函数组件或者类组件
• 在Hello.js文件末尾导出组件
• 在需要使用的js文件中导入Hello组件
• 渲染Hello组件

Hello.js文件

import React from "react";

//创建类组件
class Hello extends React.Component {
  render(){
    return (
      <div>
        这是一个单独抽离组件
      </div>
    )
  }
}
export default Hello

index.js

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

有状态组件与无状态组件

• 函数组件又叫做无状态组件，类组件又叫做有状态组件
• 状态state，即是数据
• 函数组件没有状态，只负责数据展示-静
• 类组件有自己的状态，负责更新ui，让页面-动

组件中state与setState

state基本使用

• 状态即是数据，组件内部私有数据，只能在内部使用
• state是一个对象，表示一个组件中可以有多个数据

import React from "react";

//创建类组件
class Hello extends React.Component {
  constructor(){
    //es6语法要求 super
    super()

    //初始化state
    this.state={
      count:0
    }
  }
  handleClick(){
    console.log('点击事件')
  }
  render(){
    return (
      <div onClick={this.handleClick}>
        这是一个单独抽离组件
      </div>
    )
  }
}
export default Hello

简化语法

import React from "react";

//创建类组件
class Hello extends React.Component {
  // constructor(){
  //   //es6语法要求 super
  //   super()

  //   //初始化state
  //   this.state={
  //     count:0
  //   }
  // }

  state = {
    count: 0
  }
  handleClick() {
    console.log('点击事件')
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        这是一个单独抽离组件
      </div>
    )
  }
}
export default Hello

变化数据

import React from "react";

//创建类组件
class Hello extends React.Component {
  // constructor(){
  //   //es6语法要求 super
  //   super()

  //   //初始化state
  //   this.state={
  //     count:0
  //   }
  // }

  state = {
    count: 0
  }
  handleClick() {
    console.log('点击事件')
  }   
  render() {
    return (
      <div>
        <div onClick={this.handleClick}>
          这是一个单独抽离组件
        </div>
        <div>
          计数器：{this.state.count}
        </div>
        <button onClick={()=>{
          this.setState({
            count:this.state.count + 1
          })
        }}>+1</button>
      </div>
    )
  }
}
export default Hello

如何解决事件绑定中this指向问题

箭头函数

• 箭头函数自身不绑定this，由外部环境决定的
• 方法一

import React from "react";

//创建类组件
class Hello extends React.Component {

  state = {
    count: 0
  }
  handleClick() {
    console.log('点击事件')
  } 
  handleClickCount = ()=>{
    this.setState({
      count:this.state.count + 1
    })
  }  
  render() {
    return (
      <div>
        <div onClick={this.handleClick}>
          这是一个单独抽离组件
        </div>
        <div>
          计数器：{this.state.count}
        </div>
        <button onClick={this.handleClickCount}>+1</button>
      </div>
    )
  }
}
export default Hello

• 方法二

import React from "react";

//创建类组件
class Hello extends React.Component {

  state = {
    count: 0
  }
  handleClick() {
    console.log('点击事件')
  } 
  handleClickCount(){
    this.setState({
      count:this.state.count + 1
    })
  }  
  render() {
    return (
      <div>
        <div onClick={this.handleClick}>
          这是一个单独抽离组件
        </div>
        <div>
          计数器：{this.state.count}
        </div>
        <button onClick={()=>this.handleClickCount()}>+1</button>
      </div>
    )
  }
}
export default Hello

Function.prototype.bind()

利用es6中的bind方法将事件程序中的this与组件实例绑定在一起

import React from "react";

//创建类组件
class Hello extends React.Component {

  state = {
    count: 0
  }
  constructor(){
    super()
    this.handleClickCount = this.handleClickCount.bind(this)
  }
  handleClick() {
    console.log('点击事件')
  } 
  handleClickCount(){
    this.setState({
      count:this.state.count + 1
    })
  }  
  render() {
    return (
      <div>
        <div onClick={this.handleClick}>
          这是一个单独抽离组件
        </div>
        <div>
          计数器：{this.state.count}
        </div>
        <button onClick={this.handleClickCount}>+1</button>
      </div>
    )
  }
}
export default Hello

class的实例方法

import React from "react";

//创建类组件
class Hello extends React.Component {

  state = {
    count: 0
  }
  handleClick() {
    console.log('点击事件')
  } 
  handleClickCount = ()=>{
    this.setState({
      count:this.state.count + 1
    })
  }  
  render() {
    return (
      <div>
        <div onClick={this.handleClick}>
          这是一个单独抽离组件
        </div>
        <div>
          计数器：{this.state.count}
        </div>
        <button onClick={this.handleClickCount}>+1</button>
      </div>
    )
  }
}
export default Hello

受控组件 -表单元素组件

import React from "react";

//创建类组件
class Hello extends React.Component {

  state = {
    count: 0,
    txt:''
  }
  constructor(){
    super()
    this.handleClickCount = this.handleClickCount.bind(this)
  }
  handleClick() {
    console.log('点击事件')
  } 
  handleClickCount(){
    this.setState({
      count:this.state.count + 1
    })
  }  
  render() {
    return (
      <div>
        <div onClick={this.handleClick}>
          这是一个单独抽离组件
        </div>
        <div>
          计数器：{this.state.count}
        </div>
        <button onClick={this.handleClickCount}>+1</button>
        <input type="text" value={this.state.txt} onChange={e => this.setState({txt:e.target.value})}></input>
      </div>
    )
  }
}
export default Hello

受控组件 -多表单元素事件优化

• 给表单元素添加name属性，名称与state名称一样
• 根据表单元素类型获取对应值
• 在change事件处理程序中通过[name]来修改对应的state值

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

/* 
  受控组件示例
*/

class App extends React.Component {
  state = {
    txt: '',
    content: '',
    city: 'bj',
    isChecked: false
  }

  handleForm = e => {
    // 获取当前DOM对象
    const target = e.target

    // 根据类型获取值
    const value = target.type === 'checkbox'
      ? target.checked
      : target.value

    // 获取name
    const name = target.name

    this.setState({
      [name]: value
    })
  }

  render() {
    return (
      <div>
        {/* 文本框 */}
        <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />
        <br/>

        {/* 富文本框 */}
        <textarea name="content" value={this.state.content} onChange={this.handleForm}></textarea>
        <br/>

        {/* 下拉框 */}
        <select name="city" value={this.state.city} onChange={this.handleForm}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <br/>

        {/* 复选框 */}
        <input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleForm} />
      </div>
    )
  }
}

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

非受控组件-函数组件

• 借助于ref，使用原声的DOM获取表单的元素值
• ref的作用，获取DOM或者组件

使用步骤

• 调用React.createRef()方法创建一个red对象

    constructor() {
      super()
  
      // 创建ref
      this.txtRef = React.createRef()
    }
  

• 将创建好的ref对象添加到文本框中

    <input type="text" ref={this.txtRef} />
  

• 通过ref对象获取文本框的值

    console.log('文本框值为：', this.txtRef.current.value);
  

完整代码：

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

/* 
  非受控组件：
*/

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

    // 创建ref
    this.txtRef = React.createRef()
  }

  // 获取文本框的值
  getTxt = () => {
    console.log('文本框值为：', this.txtRef.current.value);
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.txtRef} />

        <button onClick={this.getTxt}>获取文本框的值</button>
      </div>
    )
  }
}

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