react中的组件(多字预警)

react中组件的特点

• 独立
• 可复用
• 可组合

组件的内容

• 结构html
• 样式css
• 逻辑JS

组件的分类

• 基础组件:指input.button这种基础标签,以及封装过的通用UI组件
• 业务组件:由基础组件组合成的业务抽象化UI,比如部门信息下拉框
• 区块组件:由基础组件和业务组件组合成的UI块
• 页面组件:展示给用户的最终页面，一般就是对应一个路由规则

组件的两种创建方式

1.js中使用函数创建组件

// 定义一个函数式组件
const app = () => {
  return <div>第一个函数式组件</div>
}

2.使用class创建组件

// 定义一个类组件
class app1 extends React.Component {
  render () {
    return <div>第一个类组件</div>
  }
}

对比

1. 类组件创建繁琐
2. 函数创建方便

函数数组件--使用函数创建组件

定义组件

使用js函数创建的组件就叫做函数组件

函数组件规则

1. 函数名首字母大写
2. 必须要有返回值,如果不需要渲染任何内容可以返回null

代码

// 1. 使用普通函数创建组件：
function Hello() {
  return <div>这是我的第一个函数组件!</div>
}

function Button() {
  return <button>按钮</button>
}

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

使用方法

//双标签
ReactDOM.render(<Hello></Hello>, root)
//单标签
ReactDOM.render(<Hello />, root)

小结

1. 函数组件的本质是一个function函数
2. 函数式组件可以使用箭头函数表示
3. 函数式组件的要求
   1. 函数名首字母必须大写
   2. 返回值必填,如果没有返回值就返回null

类组件-使用class方法创建组件

定义格式

        使用es6中class方法创建的组件,就叫做类组件

格式

        

// import { Component } from 'react'
// class 类名 extends Component {
import React form 'react'
class 类名 extends React.Component {
  // ... 
  render () {
    return 本组件的UI结构
  }
}

注意点:

1. 与函数组件一样,组件名的第一个字母必须大写字母开头
2. extends是一个关键字,采用实现类的继承.类组件应该继承React.Component父类,从而使用父类中提供的方法和属性
3. 类组件必须提供render方法,render方法必须有返回值,表示该组件的UI结构.render会在组件创建时执行一次
4. 使用方法与函数组件方法一样

小结:

1. class组件的格式是:class 类名 extends React.Component
2. 对类组件的名称要求第一个字母必须大写
3. 类组件的内部必须提供render方法

有状态组件和无状态组件

什么是状态

        就是用来描述事物在某一时刻的形态的数据.一般称为state.

特点

        装备能被改变并且改变了之后试图也会有对应的变化

作用

• 保存数据使用
• 为了后面的更新视图打下基础.

有状态组件与无状态组件

• 有状态组件:能定义state的组件,类组件就是由状态组件        
• 无状态组件:不能定义state的组件,函数组件又叫做无状态组件

• 注意：2019年02月06日，rect 16.8中引入了 React Hooks，从而函数式组件也能定义自己的状态了

小结

1. 状态:就是用来描述事物在某一时刻的形态的数据
2. 状态的特点:可以修改,改了之后视图也能更新
3. 函数组件是无状态组件,类组件是有状态组件

state的使用

定义状态

        固定格式state=对象来做初始化

 代码

import React from "react";
export default class Hello extends React.Component {
  // 这里的state就是状态
  state = {
    list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
    isLoading: true
  };
}

在视图的使用

  render() {
    return (
      <>
        <h1>歌单-{this.state.count}</h1>
        <ul>
          {this.state.list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
        <div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
      </>
    );
  }

事件绑定

 格式

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

注意：React 事件名采用驼峰命名法，比如：onMouseEnter、onFocus、 onClick ......

代码实例

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

const title = <h1>react中的事件</h1>


export default class Hello extends React.Component {
  fn() {
    console.log('mouseEnter事件')
  }
  render() {
    return (
      <div
        onClick={() => console.log('click事件')}
        onMouseEnter={this.fn}
        能处理鼠标进入或者点击事件
      </div>
    )
  }
}

const content = (
  <div>
    {title}
    {<Hello />}
  </div>
)

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

总结

1. 事件名是小驼峰命名格式
2. 在类补充方法,不需要写function
3. this.方法不要写括号,不然会直接调用

事件中this的指向问题

• render方法中的this指向的而是当前react组件。

• 事件处理程序中的this指向的是undefined

分析原因

• 事件处理程序的函数式函数调用模式，在严格模式下，this指向undefined

• render函数是被组件实例调用的，因此render函数中的this指向当前组件

总结

1. class的内部，开启了局部严格模式use strict，所以this不会指向window undefined

2. onClick={this.fn}中，this.fn的调用并不是通过类的实例调用的，所以值是undefined

事件处理-this指向解决方案

有三种方式

解决事件处理程序中this指向问题主要有三种方式

1. Function.prototype.bind()

2. 箭头函数

3. class 的实例方法【推荐】

方式1: 使用bind方法

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>疯狂点我</button>
      </div>
    )
  }
}

方法2:箭头函数

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={() => {this.handleClick()}}>大力点我</button>
      </div>
    )
  }
}

方法3:class 的实例方法

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>使力,点不坏的</button>
      </div>
    )
  }
}

总结

        class实例方法是使用最多的.也是最方便的.

组件的状态-修改状态

setState

语法:

        this.setState({要修改的部分数据})

理解状态不可变

react核心理念之状态不可变

不要直接修改当前状态值，而是创建新的状态值。

获取表单元素的值的两种思路

思路

获得表单元素的值两种思路

1. 直接找到表单元素进行dom操作---非受控组件
2. 将表单元素值与react的state绑定在一起,把用户的修改同步到state中.让组件受到react的控制--受控组件

非受控组件-ref

ref 的使用格式

步骤

1. 导入方法.import { createRef } from 'react'
2. 调用createRef方法创建引用,假设名为refDom.  const(如果在class实例中调用不需要写const) refDom=createRef
3. refDom设置给表单元素的ref属性 <input ref = {refDom}>
4. 通过refDom.current.value来获取值.

内容

• 受控组件是通过 React 组件的状态来控制表单元素的值

• 非受控组件是通过手动操作 DOM 的方式来控制

• 此时，需要用到一个新的概念：ref

• ref：用来在 React 中获取 DOM 元素

演示代码

// 1. 导入方法
import { createRef } from 'react'

class Hello extends Component {
  // 2. 调用createRef方法创建引用
  txtRef = createRef()

  handleClick = () => {
    // 4. 通过.current.value来获取值
    console.log(this.txtRef.current.value)
  }

  render() {
    return (
      <div>
      	<h1>如何获取input中的值-非受控组件-ref</h1>
         {/* 3. 设置给表单元素的ref属性 */}
        <p><input type="text" ref={this.txtRef}/></p>
        <button onClick={handleClick}>获取文本框的值</button>
      <div>
    )
  }
}

受控组件

 如何理解受控

        正常情况下,表单元素input是可以任意输入内容的,可以理解为input自己维护它的状态(value)

        受控组件思路:

1. 在state中定义状态
2. 将state中的状态与表单元素的value绑定在一起,进而通过state中的状态来控制表单元素的值

基本步骤

        有两个步骤

1.    在state中定义状态
2. 对表单元素做两件事
   1. 设置value为上面定义的状态
   2. 绑定onChange事件,并在回调中通过setState来修改状态值

代码示例

        

class App extends React.Component {
  state = {
    // 1. 在state中定义状态
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }
  
  handleClick = （）=> {
    console.log(this.state.msg)
  }

  render() {
    return (
      <div>
      	<h1>如何获取input中的值-受控组件</h1>
        <p>
        {/* 2. 对表单元素做两件事 */}
          	<input type="text"
							value={this.state.msg}
							onChange={this.handleChange}
						/>
        </p>
        <button onClick={handleClick}>获取文本框的值</button>
      <div>
    )
  }
}