react基本用法总结

上火的金鱼妹

已于 2025-06-27 23:38:14 修改

阅读量519

点赞数 4

CC 4.0 BY-SA版权

分类专栏： react相关文章标签： react.js 前端 javascript

于 2025-03-25 09:21:22 首次发布

本文链接：https://blog.csdn.net/goldfish_333/article/details/146467198

react相关专栏收录该内容

1 篇文章

订阅专栏

函数组件内部的状态管理

1.对于函数组件内部的状态管理钩子常用的是useState ，可以通过过useState 初始化状态和改变状态的方法具体如下对于useState的dispatch改变状态方法最佳使用方法是传入回调方法进行赋值这样才能保证每次修改后都会及时更新

1）对于数组和对象直接修改key /改变数组原始值的方法类似于push... 并不能触发更新，要直接创建一个新对象进行set 注意：不论是useState 或 setState（类组件的状态更新）都是异步触发的并且对于多次状态更新会合并为一次（目前是为了优化渲染性能）所以当同时执行多次时只会使用最后一次的结果如果需要在短时间内多次改变状态 可以使用函数式更新

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    const [lists,setLists] = useState(['apple','orange','pineapple','bananan'])
    function addLists(){
        
        setLists([...lists,'test123'])
        setLists([...lists,'test123456'])//只有这条会生效 会直接覆盖上面效果
        // 使用函数式更新写法 会正常添加两条
        setLists((lists)=>{return [...lists,'test123']})
        setLists((lists)=>{return [...lists,'test123456']})
        
    }
  return (
    <div>
        {lists.map((item)=>(<p key={item}>{item}</p>))}
        <button onClick={addLists}></button>
        <p>Count: {count}</p>
        <button onClick={() => setCount((count)=>count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

对于类组件内部的状态管理则是直接使用this.state 在constructor里进行初始化通过this.setState 在原型方法里进行状态改变具体如下（注意想要在原型方法里直接使用 this 只能使用箭头函数或着通过bind 对 this指向进行绑定）

class couter extends Component{
    constructor(props){
        // 挂载前 初始化
        super(props)
        // 类组件里的状态初始化 改变状态 --> this.setState
        this.state={
            count:0,
            hasColor:false,
            lists:[
                {
                    name:'book1'
                },
                {
                    name:'book2'
                },
                {
                    name:'book3'
                }
            ]
        }
        // 对原型里的this 进行绑定
        // this.increment =this.increment.bind(this);
    }
    increment=()=>{
        // 1. 不能直接使用 this 想要使用 this 需要在constructor 里面对 this进行绑定 2 .或者直接使用 箭头函数        console.log('sdtate=====',this.state.count)
        console.log('state======>',this.state.count)
        // debugger
        this.setState({count:this.state.count+1})
    }
}

元素的事件绑定

2.对于元素的事件绑定的两种方法（直接在行内调用 / 通过定义的函数进行调用）

1）行内调用的写法(见onClick)

render(){
 return (
                <>
                    <h3>other Components</h3>
                    <button onClick={()=>{this.setState({hasColor:!this.state.hasColor})}}>hasColor</button>
                    {this.state.hasColor?<h3>222222</h3>:<h2>333333</h2>}
                </>
            )
}

2）定义的函数调用的写法（见onClick）

 return (
                <>
                <h1>hello {this.props.name}</h1>
                <span>{this.state.count}</span>
                {/* 调用封装好的方法 */}
                <button onClick={this.increment}>upCount</button>
                {this.state.lists.map((item)=>(<p key={item.name.toString()}>{item.name}</p>))}
                </>
                )

对于列表的渲染

在render里通过map遍历进行渲染同vue v-for一样需要绑定key（切记 react里再html里所有变量及动态绑定的都是通过{}）具体写法如下

{this.state.lists.map((item)=>(<p key={item.name.toString()}>{item.name}</p>))}

对于条件判断的切换

可以使用if 或者三目运算

具体情况看逻辑的复杂程度代码如下（由于两个状态的逻辑都比较复杂所以使用if判断）

render(){
        //
        if(this.props.isLogin){
            return (
                <>
                <h1>hello {this.props.name}</h1>
                <span>{this.state.count}</span>
                {/* 调用封装好的方法 */}
                <button onClick={this.increment}>upCount</button>
                {this.state.lists.map((item)=>(<p key={item.name.toString()}>{item.name}</p>))}
                </>
                )
        }else{
            return (
                <>
                    <h3>other Components</h3>
                    <button onClick={()=>{this.setState({hasColor:!this.state.hasColor})}}>hasColor</button>
                    {this.state.hasColor?<h3>222222</h3>:<h2>333333</h2>}
                </>
            )
        }
        
    }

对于父子组件通信

不同于 vue props emit的传参和触发事件 react直接通过props 传递参数和方法（子组件直接调用传递的方法即可触发父组件里的绑定事件）

子组件需要再constructor里通过 super(props) 然后才能在下面进行调用具体代码如下

父组件
render(){
    return (
    <Couter name="wolrd" isLogin={isLogin} />
    )
}
子组件
constructor(props){
    super(props)
}
render(){
    // 通过this.props 获取
    if(this.props.isLogin){

    }
}

类似于 vue react也有 props验证但是写法有所不同具体如下（从react15版本 props验证就专门移到了 prop-types 库）

import propTypes from 'prop-types'; 
class couter extends Component{
    // props验证
    static propTypes={
        isLogin:propTypes.bool,
        name:propTypes.string
    }
    constructor(props){
        super(props)
    }
}

还有很多的写法具体可见菜鸟教程