React基础知识点总结--2️⃣

三、React组件基础

目标

◆ 能够使用函数创建组件
◆ 能够使用class创建组件
◆ 能够给React元素绑定事件
◆ 能够使用state和setState()
◆ 能够处理事件中的this指向问题
◆ 能够使用受控组件方式处理表单

目录

◆ React 组件介绍
◆ React 组件的两种创建方式
◆ React 事件处理
◆ 有状态组件和无状态组件
◆ 组件中的state和setState()
◆ 事件绑定 this指向
◆ 表单处理

1.React组件介绍

● 组件是React的一等公民,使用React就是在用组件

● 组件表示顽面中的部分功能

● 组合多个组件实现完整的页面功能

● 特点:可复用、独立、可组合

2. React组件 的两种创建方式

2.1 使用函数创建组件

● 函数组件:使用JS的函数(或箭头函数)创建的组件
● 约定1: 函数名称必须以大写字母开头
● 约定2 :函数组件必须有返回值,表示该组件的结构
● 如果返回值为 null ,表示不渲染任何内容

function Hello(){
   
    return(
        <div>我是Hello组件</div>
    )
}
// 箭头函数
// const Hello = () =><div>我是箭头函数创建的Hello组件</div>
ReactDOM.render(<Hello/>,document.getElementById('root'))

小结：

● 使用JS中的函数创建的组件叫做 :函数组件
● 函数组件必须有返回值
● 组件名称必须以大写字母开头，React据此区分组件和普通的React元素
● 使用函数名作为组件标签名

2.2 使用类创建组件

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

class Hello extends React.Component{
   
    render() {
   
        return(
            <div>我是类组件</div>
        )
    }
}
ReactDOM.render(<Hello/>,document.getElementById('root'))

2.3 抽离为独立JS文件

● 思考:项目中的组件多了之后,该如何组织这些组件呢?

● 选择一: 将所有组件放在同一个JS文件中

● 选择二 :将每个组件放到单独的JS文件中

●组件作为一 个独立的个体,一般都会放到一个单独的JS文件中

步骤：

1. 创建Hello.js

2. 在Hello.js中导入React

3. 创建组件( 函数 或 类 )

4. 在Hello.js中导出该组件

5. 在index.js中导入Hello组件

6. 渲染组件

   // Hello.js
   import React from 'react'
   class Hello extends React.Component{
   
       render(){
   
           return(
               <div>我是独立的一个组件</div>
           )
       }
   }
   export default Hello

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

3. React事件处理

3.1 事件绑定

● React 事件绑定语法与DOM事件语法相似

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

● 注意: React事件采用驼峰命名法,比如: onMouseEnter、onFocus

class App extends React.Component{
   
  handleClick(){
   
    console.log('单击');
  }
  render(){
   
    return(
      <button onClick={
   this.handleClick}>绑定事件处理--单机事件</button>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

● 在函数组件中绑定事件:

function App() {
   
  function handleClick() {
   
    console.log(