「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

1. React组件介绍

组件是react 的一等公民，使用react就是在用组件，组件表示页面中的部分功能，组合多个组件实现完整的页面功能；

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

2.创建方式

使用函数创建组件

函数组件：使用js 的函数（或者箭头函数）创建的组件
约定1：函数名必须以大写字母开头，React 据此区分组件和普通的 React 元素
约定2：函数组件必须有返回值，表示该组件的结构
使用函数名作为组件的标签名

注意：如果没有什么要返回的内容，则可以写成return null；

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

//const Hello = () =><div>这是我的第一个函数组件</div>
  

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

使用类创建的组件

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

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

reactDom.render(<HelloTest />, 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 Hello from './Hello'


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

3.React 的事件处理

react 事件绑定的语法与DOM 事件语法相似；

语法：on + 事件名称 = { 事件处理程序 }，比如：onClick = { () =>{}}

注意： react 事件采用驼峰命名法；

处理的方式

使用类组件的方式处理事件：

class App extends React.Component {
  handelClick() {
    alert('你点击了按钮');
  };

  render() {
    return (
      <button onClick={this.handelClick}>React  按钮</button>
    )
  }
}

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

使用函数绑定事件

function APP1() {
  function handelClick() {
    alert('你点击了按钮');
  };

  return (
    <button onClick={handelClick}>React  按钮22</button>
  )
}

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

事件对象

可以通过事件处理程序的参数获取到事件对象
React中的事件对象叫做：合成事件（对象）
合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

class Obj extends React.Component {
  handelClick(e) {
    // 组织浏览器默认行为
    e.preventDefault();
    console.log('单击事件触发了');
  }

  render() {
    return (
      <a href="http://www.baidu.com" onClick={this.handelClick}>点击我，去控制台看看</a>
    )
  }
}
reactDom.render(<Obj />, document.getElementById('root'))

4.有状态组件和无状态组件

有状态组件 === 函数组件：没有自己的状态，只负责展示数据（静）；

无状态组件 === 类组件：有自己的状态，负责更新UI ，让页面“动”起来；

状态（state）即数据；

5.组件中的state和setState

基本使用state

状态即数据，是私有属性，只能在组件内部使用
通过this.state 来获取状态（数据）

class AppState extends React.Component {
  /*   constructor() {
      super()
      //初始化state
      this.state = {
        count: 520
      }
    } */

  //简化语法
  state = {
    count: 52.01
  }
  render() {
    return (
      <h2>计数器：{this.state.count}</h2>
    )
  }
}

reactDom.render(<AppState />, document.getElementById('root'))

setState()方法

数据驱动视图

class AppState extends React.Component {
  //简化语法
  state = {
    count: 52.10
  }
  render() {
    return (
      <div>
        <h2>计数器：{this.state.count}</h2>
        <button onClick={() => {
          this.setState(
            { count: this.state.count + 1 }
          )
        }
         // 错误示例
         //  this.state.count + 1    
        }>   点击+1 </button>
      </div>
    )
  }
}

reactDom.render(<AppState />, document.getElementById('root'))

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

6.事件绑定的this 指向

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

render()方法中的this为组件实例，可以获取到setState();

class AppThis extends React.Component {
  onIncrement() {
    this.setState(
      { count: this.state.count + 1 }
    )
  }
	//简化语法
  state = {
    count: 52.10
  }
  render() {
    return (
      <div>
        <h2>计数器：{this.state.count}</h2>
        <button onClick={() => {
          this.onIncrement();
        }
        }>   点击+1 </button>
      </div>
    )
  }
}
reactDom.render(<AppThis />, document.getElementById('root'))

function.prototype.bind()

利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

class AppThis extends React.Component {
constructor() {
    super()
    this.onIncrement = this.onIncrement.bind(this);
  }
  onIncrement() {
    console.log("事件处理程序中的this值",this);
    this.setState(
      { count: this.state.count + 1 }
    )
  }
//简化语法
  state = {
    count: 52.10
  }
  render() {
    return (
      <div>
        <h2>计数器：{this.state.count}</h2>
        <button onClick={() => {
          this.onIncrement();
        }
        }>   点击+1 </button>
      </div>
    )
  }
}

reactDom.render(<AppThis />, document.getElementById('root'))

class 的实例方法 (推荐)

利用箭头函数形式的class实例方法

注意：改语法是实验性语法，但是由于Babel的存在可以直接使用

class AppThis extends React.Component {
  onIncrement = () => {
    this.setState(
      { count: this.state.count + 1 }
    )
  }
	//简化语法
  state = {
    count: 52.10
  }
  render() {
    return (
      <div>
        <h2>计数器：{this.state.count}</h2>
        <button onClick={() => {
          this.onIncrement();
        }
        }>   点击+1 </button>
      </div>
    )
  }
}
reactDom.render(<AppThis />, document.getElementById('root'))

7.表单处理

受控组件

定义

HTML中的表单元素是可以输入的，也就是有自己的可变的状态，而在react中可变状态通常保存在state中，并且只能通过setState() 方法来修改；react 将state 与表单元素value绑定到一起，有state 的值来控制表单元素的值，所以其值受到react控制* 的 表单元素 成为 受控组件

步骤

在state中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
在给表单元素绑定change事件，将表单元素的值设置为state的值（控制表单元素值的变化）

/*
* 含义：其值受到react 控制的表单元素
*
* 操作文本框的值
* */
class ControlComponent extends React.Component{
  state ={
    txt:'',
    content:''
  }
  //处理单个文本框的值
  handelInputChange= (e) =>{
    this.setState({
      txt:e.target.value
    })
  }
  //处理富文本框的值
  handelTextAreaChange = (e) =>{
    this.setState({
      content:e.target.content
    })
  }
  render() {
    return (
        <div>
          <input type="text" value={this.state.txt}  onChange={this.handelInputChange}/>
          <hr/>
          <br/>
          <textarea value={this.state.content}  onChange={this.handelTextAreaChange}></textarea>
        </div>
    )
  }
}
reactDom.render(<ControlComponent />, document.getElementById('root'))

优化代码：

class ControlComponent extends React.Component{
  state ={
    txt:'',
    content:''
  }
  //处理单个文本框的值
  handelChange= (e) =>{
    //获取当前对象
    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.handelChange}/>
          <hr/>
          <br/>
          <textarea name="content" value={this.state.content}  onChange={this.handelChange}></textarea>
        </div>
    )
  }
}

非受控组件

定义：

借助于ref,使用原生的DOM方式来获取表单元素的值

步骤：

调用React.createRef()创建一个ref 对象

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

将创建好的ref 对象添加到文本框中 <input type="text" ref={this.txtRef} />
通过ref对象获取到文本的框的值

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

例子：


class NonControlComponent 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(<NonControlComponent />, document.getElementById('root'))

最后

我正在成长，如果有什么问题欢迎大家留言，我们一起讨论。。。

如果对您有用，希望您留下评论/👍/收藏。

您的三连，是对我创作的最大的鼓励🙇‍♀️🙇‍♀️🙇‍

react 组件介绍（创建＆分类）