React 组件

组件: 将页面按照界面功能进行拆分，每一块界面都拥有自己的独立逻辑，这样可以提高项目代码的可维护性

React 可以创建 函数组件(rafce 快速生成结构) 和 类组件(rcc快速生成结构)

函数组件

使用 JS 函数 (普通,箭头) 创建的组件

定义组件

• 函数名称首字母必须大写, React 根据此来区分组件和HTML元素
• 函数必须有返回值, 表示该组件的UI结构, 如果不渲染可返回null

使用组件

import ReactDom from 'react-dom';

// 普通函数
function Header() {
  return <div>头部组件</div>;
}

// 箭头函数
const Footer = () => {
  return <div>底部组件</div>;
};

// 根组件
const App = () => {
  return (
    <>
      <Header />
      <Footer />
    </>
  );
};

ReactDom.render(<App />, document.getElementById('root'));

//  函数的名称就是组件名称，使用组件就是把组件名称当标签使用即可

类组件

使用 class 语法创建的组件

定义组件

• 类名首字母必须大写
• 必须继承 React.Component 父类
• 必须有 render 函数, 返回 UI结构, 无渲染可返回null

使用组件

import { Component } from 'react';
import ReactDom from 'react-dom';

class Header extends Component {
  render() {
    return <div>头部组件</div>;
  }
}

// 根组件
class App extends Component {
  render() {
    return (
      <>
        <Header />
      </>
    );
  }
}

ReactDom.render(<App />, document.getElementById('root'));

// 使用组件时把组件名称当标签使用即可

无状态组件

组件本身不定义状态，没有组件生命周期，只负责 UI 渲染

React16.8之前的函数组件都是无状态组件, Hooks出现后函数组件也可以有状态

有状态组件

组件本身有独立数据, 拥有组件生命周期,存在交互行为

class组件可以定义组件自己的状态,拥有组件生命周期,是有状态组件

区别:

无状态组件由于没有维护状态只做渲染，性能较好

有状态组件提供数据和生命周期，能力更强

事件绑定

通过 on+事件名称={处理函数} 来绑定，事件名称遵循大驼峰

//  React 是合成事件,会映射到原生标签上面

解决this指向

import React, { Component } from 'react'

export default class App extends Component {
  constructor(){
    super()
    this.fn3 = this.fn3.bind(this)
  }
  state = {
    count:100
  }
  fn1(){
    console.log(this);  // undefined
  }
  fn2(){
    console.log(this);  // 当前组件
  }
  fn3(){
    console.log(this);  // 当前组件
  }
  fn4(){
    console.log(this);  // 当前组件
  }
  fn5 = ()=> {
    console.log(this);  // 当前组件
  }
  render() {
    return (
      <div>
       <button onClick={ this.fn1 }>点击1</button>
       {/* 方式1  模版里使用bind将this绑定  on事件名={this.事件函数.bind(this)} */}
       <button onClick={ this.fn2.bind(this) }>点击2</button>
       {/* 方式2  构造函数里bind绑定 */}
       <button onClick={ this.fn3 }>点击3</button>
       {/* 方式3  模版里定义箭头函数,箭头函数里调用的事件处理函数 */}
       {/* 箭头函数可以留存this的指向不变化 */}
       <button onClick={ ()=>{this.fn4()} }>点击4</button>
       {/* 方式4  定义事件函数的时候就定义成箭头函数 */}
       <button onClick={ this.fn5 }>点击5</button>
    </div>
    )
  }
}