React学习一

最新推荐文章于 2022-11-11 06:55:18 发布

Tokisaki_Kurumi

最新推荐文章于 2022-11-11 06:55:18 发布

阅读量206

点赞数

分类专栏： javascript react 文章标签： react

本文链接：https://blog.csdn.net/Tokisaki_Kurumi/article/details/119780548

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

react

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了React的基础知识，包括导入React和ReactDOM、JSX语法、数组映射渲染元素、组件的创建（函数组件和类组件）、事件处理、状态管理和表单控制。讲解了如何声明和修改状态，以及处理表单数据的受控组件和非受控组件的实现方式。此外，还讨论了在事件处理中解决`this`指向问题的三种方法。

摘要由CSDN通过智能技术生成

基础：

首先导入React和ReactDOM

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

HTML结构可以使用JSX语法：


const killers = [
    {id:1,name:'zhangsan'},
    {id:2,name:'lisi'},
    {id:3,name:'wangwu'}
]

const html = (
	<div>
		{ killers.map(item=>
		<div 
		className='title' 
		key={item.id} 
		style={{color:'red',backgroundColor:'purple'}}>
		{item.name}>
		</div>) }
	</div>
)

注意：
1、vue中使用的是{{}}插值表达式，react中是通过{}来插入内容，在{}中不可以写if 等判断语句(可以用三元)。
2、在vue中使用v-for来渲染，但是在react中是直接使用js本身的map方法来遍历数据并返回结构，其中样式有多个需要使用对象形式。

最后渲染：

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

组件：

React中组件分为函数组件和类组件：
函数组件：

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


function Hello() {
    return (
        <div>This is my first function component</div>
    )
}

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

类组件：

import ReactDOM from 'react-dom'

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

抽离成单独的js文件：

// 抽离出的js文件
import React from "react";

class Hello extends React.Component {
    render() {
        return (
            <div>组件一</div>
        )
    }
}

export default Hello

导入使用：

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

import Hello from "./Hello";

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

React事件处理：

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

// 使用类组件时
// class App extends React.Component {
//     handleClick(){
//         alert('起飞')
//     }
//     render() {
//         return (
//             <button onClick={this.handleClick}>点我</button>
//         )
//     }
// }

//	使用函数组件时
function App () {
    function handleClick(){
        alert('起飞')
    }
    return (
        <button onClick={handleClick}>点我起飞</button>
    )
}
ReactDOM.render(<App/>,document.getElementById('root'))

对于事件对象：

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


class App extends React.Component {
    handleClick(e) {
        e.preventDefault()	// 阻止默认行为
        console.log('我被点击了！！')
    }
    render() {
        return (
            <a href="http://www.baidu.com" onClick={this.handleClick}>点我百度</a>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

状态：

组件也分为有状态组件和无状态组件。状态也就是数据。有状态组件只能是类组件。

在类组件中对状态state进行声明：

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

class App extends React.Component {
	//	声明状态方式 1
    // constructor() {
    //     super();
    //     this.state = {
    //         count:0
    //     }
    // }
    
    //	声明状态方式 2
    state = {
        count : 0
    }

    render() {
        return (
            <div>
                <h1>计数器:{ this.state.count }</h1>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

对state状态的修改必须通过setState方法进行：

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

class App extends React.Component {
    state = {
        count : 0
    }
    render() {
        return (
            <div>
                <h1>计数器:{ this.state.count }</h1>
                <button onClick={()=>{
                    this.setState({
                        count:this.state.count + 1
                    })
                }}>+1</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

需要注意的是this指向问题！！！
对事件处理从JSX中进行抽离时对于this指向问题有3种解决方法：
方法1：

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

class App extends React.Component {
    state = {
        count : 0
    }
    onIncrement() {
        this.setState({
            count:this.state.count + 1
        })
    }
    render() {
        return (
            <div>
                <h1>计数器:{ this.state.count }</h1>
                <button onClick={()=>this.onIncrement()}>+1</button>
                //	在jsx中使用箭头函数来调用处理函数
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

方法2：

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

class App extends React.Component {

    state = {
        count : 0
    }

    constructor() {
        super();
        this.onIncrement = this.onIncrement.bind(this)
        //	通过bind方法一次性修改this指向，这样在jsx中直接调用就可以了
    }

    onIncrement() {
        this.setState({
            count:this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <h1>计数器:{ this.state.count }</h1>
                <button onClick={this.onIncrement}>+1</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

方法3：

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

class App extends React.Component {
    state = {
        count : 0
    }
    onIncrement = () => {
        this.setState({
            count:this.state.count + 1
        })
    }
    //	在声明事件处理函数时直接使用箭头函数，这样在声明时this就指向react组件对象
    render() {
        return (
            <div>
                <h1>计数器:{ this.state.count }</h1>
                <button onClick={this.onIncrement}>+1</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

表单处理

基于表单处理可以对组件分为受控组件和非受控组件：
受控组件：

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

class App extends React.Component {
    state = {
        text: ''
    }
    handleChange = (e) => {
        this.setState({
            text : e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.text} onChange={this.handleChange}/>
// 给input输入框value绑定state状态并且绑定change事件处理值修改时对state状态进行修改达到受控的目的
                <p>{this.state.text}</p>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

对于特殊情况多选按钮：

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

class App extends React.Component {

    state = {
        isChecked:false
    }
    handleChecked = (e) => {
        this.setState({
            isChecked:e.target.checked
        })
    }
    render() {
        return (
            <div>
                <input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked}/>
                //	对于多选按钮不是绑定的value而是绑定checked值，为布尔值。
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

如果对于表单中多个输入框或多选按钮等进行统一setSate处理则可以给每个表单控件设置name属性：

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

class App extends React.Component {
    state = {
        txt:'',
        city:'sh',
        isChecked: false
    }

    handleForm = (e) => {
        const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value
        //	判断表单控件的name字段
        const name = e.target.name
        this.setState({
            [name]:value
        })
    }
    render() {
        return (
            <div>
                <input type="text"  name="txt" value={this.state.txt} onChange={this.handleForm}/>
                //	绑定的name和state中的状态名一一对应
                <br/>
                <select name='city' value={this.state.city} onChange={this.handleForm}>
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="nj">南京</option>
                </select>
                <br/>
                <input name='isChecked' type="checkbox" checked={this.state.isChecked} onChange={this.handleForm}/>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

非受控组件
对于使用表单控件自身处理的组件称为非受控组件，我们需要获取其值是通过React.createRef()方法

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

class App extends React.Component {
    constructor() {
        super();
        this.txtRef = React.createRef()
    }

    getTxt = () => {
        console.log('文本框中的值为',this.txtRef.current.value)
        // 可以获取对应表单控件中的value值
    }

    render() {
        return (
            <div>
                <input type="text" ref={this.txtRef}/>
                <button onClick={this.getTxt}>获取文本框的值</button>

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