React组件

组件可以对局部视图的封装、可复用、维护、独立

从创建方式来分，可以分为两类：

函数组件：使用函数创建的组件
类组件：使用类创建的组件

函数组件：

规则：

为了和普通函数对比，首字母必须大写。
函数必须要有返回值，返回值为null的情况下，不渲染任何内容

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

//函数组件

function Hello(){
  return (<h1>Hello 函数组件</h1>)
}
// 箭头函数写法
// const Hello = ()=>{
//   return (<h1>Hello 函数组件</h1>)
// }

// 箭头函数简写
// const Hello = ()=> (<h1>Hello 函数组件</h1>)

//渲染组件
ReactDOM.render(<Hello />,document.querySelector('#root'));

在这里插入图片描述

类组件

用ES6的class类创建的组件
规则：

类名称首字母必须大写。
类组件要继承React.Component
类组件必须要提供render方法
必须要有返回值，返回值为null的情况下，不渲染任何内容

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 类组件
class Hello extends React.Component {
    render() {
        return (<h1>Hello 类组件</h1>)
    }
}
// 渲染组件
ReactDOM.render(<Hello></Hello>,document.getElementById('root'));

在这里插入图片描述

一般来说，我们多个组件如何写，每一个组件对应一个js文件，维护起来比较方便

把组件抽离成单独的js：
在my-app 文件夹下面的src文件夹里面新建一个 Hi.js 文件

// 创建Hi组件
import React from 'react'

class Hi extends React.Component {
    render() {
        return (<h1>Hi, everyone</h1>)
    }
}

// 导出Hi组件
export default Hi

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

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

在这里插入图片描述

事件

命名：on+事件名称（驼峰命名法）

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 事件绑定
class App extends React.Component {
    render() {
        return (<input type="button" onClick={()=>{console.log('我被点击了')}} value="button" />)
    }
}

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

这样有点混乱，js和HTML 混合在一起，我们可以这样写：

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 事件绑定
//（类中定义一个方法：是原型的方法） handleClick 是原型的方法
class App extends React.Component {
    handleClick() {
        console.log('我被点击了')
    }
    render() {
        return (<input type="button" onClick={this.handleClick} value="button" />)
    }
}

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

上面我们都是用类组件写的，接下来我们用函数组件写：

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 事件绑定
function App() {
    function handleClick() {
        console.log('我被点击了')
    }
    return  (<input type="button" onClick={handleClick} value="button" />)
}

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

在这里插入图片描述

事件对象

我们经常在事件处理程序当中需要拿到事件对象，怎么拿事件对象呢？
在react中把这个事件对象叫合成对象，兼容所有浏览器

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 事件绑定
function App() {
    function handleClick(e) {
        console.log(e);
    }
    return  (<input type="button" onClick={handleClick} value="button" />)
}

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

在这里插入图片描述

做一个超链接，阻止它跳转，点击超链接，不会跳转：

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 事件绑定
function App() {
    function handleClick(e) {
        // React事件对象也叫合成对象 兼容所有浏览器
        e.preventDefault();
        console.log("我被阻止了");
    }
    return (<a onClick={handleClick} href="https://www.baidu.com">链接到百度</a>)
}

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

在这里插入图片描述

React State(状态)

状态的概念

状态就是应用程序当中的数据

开发组件，组件肯定有自己的数据
从状态的角度来分，还可以分成两类：

有状态的组件（类组件当中是有状态的）（一般负责更新UI）
无状态的组件（函数组件中无状态）（一般用于展示静态内容）

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    constructor() {
        super()
        // 初始化状态
        this.state = {
            num: 10
        }
    }
    render() {
        return (<div>有状态组件 {this.state.num}</div>)
    }
}

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

简写的方式：

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    state = {
        num: 10
    }
    render() {
        return (<div>有状态组件 {this.state.num}</div>)
    }
}

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

在这里插入图片描述

修改状态

react状态修改只能用 setState 来修改状态（数据驱动视图）

计数器功能：

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    state = {
        num: 0
    }
    render() {
        return (<div>
            有状态组件 {this.state.num}
            <button onClick={()=>{
                this.setState({
                    num:this.state.num + 1
                })
            }}>+1</button>
            </div>)
    }
}

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

在这里插入图片描述

优化代码：

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    state = {
        num: 0
    }
    // 事件处理程序
    handleIncrement () {
        // 修改state 修改state并更新UI
        this.setState({
            num: this.state.num + 1
        })
    }
    render() {
        return (<div>
            有状态组件 {this.state.num}
            <button onClick={this.handleIncrement}>+1</button>
        </div>)
    }
}

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

！！！这样写就会报错，是因为this的指向问题

在这里插入图片描述

解决方法一：bind()

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    state = {
        num: 0
    }
    // 事件处理程序
    handleIncrement () {
        // 修改state 修改state并更新UI
        console.log(this);
        this.setState({
            num: this.state.num + 1
        })
    }
    render() {
        return (<div>
            有状态组件 {this.state.num}
            <button onClick={this.handleIncrement.bind(this)}>+1</button>
        </div>)
    }
}

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

解决方法二：bind放入构造函数中

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    state = {
        num: 0
    }
    constructor() {
        super()
        this.handleIncrement = this.handleIncrement.bind(this)
    }
    // 事件处理程序
    handleIncrement () {
        // 修改state 修改state并更新UI
        console.log(this);
        this.setState({
            num: this.state.num + 1
        })
    }
    render() {
        return (<div>
            有状态组件 {this.state.num}
            <button onClick={this.handleIncrement}>+1</button>
        </div>)
    }
}

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

解决方法三：箭头函数解决

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    state = {
        num: 0
    }
    // 事件处理程序
    handleIncrement() {
        // 修改state 修改state并更新UI
        console.log(this);
        this.setState({
            num: this.state.num + 1
        })
    }
    render() {
        return (<div>
            有状态组件 {this.state.num}
            <button onClick={()=>{this.handleIncrement()}}>+1</button>
            </div>)
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

解决方法四：（推荐）使用class的实例方法

// 导入相关的包
import React from "react";
import ReactDOM from "react-dom";

// 创建组件
class App extends React.Component {
    state = {
        num: 0
    }
    // 事件处理程序
    handleIncrement = () => {
        // 修改state 修改state并更新UI
        console.log(this);
        this.setState({
            num: this.state.num + 1
        })
    }
    render() {
        return (<div>
            有状态组件 {this.state.num}
            <button onClick={this.handleIncrement}>+1</button>
            </div>)
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

在这里插入图片描述

原文链接：https://blog.csdn.net/pangqixjj/article/details/121789701