React : Class & Functional

本文深入探讨了在React应用中如何有效管理状态,包括Class组件与Function组件的状态更新方式,展示了如何使用useState进行状态管理,以及如何在复杂状态需求下采用多个useState的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Class

import React, { Component } from 'react';
import './App.css';
import Person from './Person/person';
import { render } from '@testing-library/react';

class App extends Component {
  state ={
    persons:[
      {name:'Max' , age:28},
      {name:'manu' , age:24},
      {name:'Snie' , age:26}
    ],
    otherstate:"some other state"
  };

  switchNameHandler = ()=>{
    //console.log('Was Click!');
    //Do not do this
    //this.state.persons[0].name = 'Maximilian';
    this.setState({persons:[
      {name:'Max1' , age:281},
      {name:'manu1' , age:241},
      {name:'Snie1' , age:261}
    ]})
  };

  render(){
  return (
    <div className="App">
      <h1>Hi i am a React App!</h1>
      <p>It is working!</p>
      <button onClick={this.switchNameHandler}>Switch Name</button>
      <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
      <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My Hobbies: Racing</Person>
      <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/>
    </div>
  );
  }
}

export default App;

Functional

import React, { useState } from 'react';
import './App.css';
import Person from './Person/person';
import { render } from '@testing-library/react';

const App = props=>{
  const [ personsState, setPersonsState ] = useState({
    persons:[
      {name:'Max' , age:28},
      {name:'manu' , age:24},
      {name:'Snie' , age:26}
    ],
    otherstate:"some other state"
  }
  );
  console.log(personsState);

  const switchNameHandler = ()=>{
    //console.log('Was Click!');
    //Do not do this
    //this.state.persons[0].name = 'Maximilian';
    setPersonsState({persons:[
      {name:'Max1' , age:281},
      {name:'manu1' , age:241},
      {name:'Snie1' , age:261}
    ],
    otherstate:personsState.otherstate
  })
  };

  return (
    <div className="App">
      <h1>Hi i am a React App!</h1>
      <p>It is working!</p>
      <button onClick={switchNameHandler}>Switch Name</button>
      <Person name={personsState.persons[0].name} age={personsState.persons[0].age}/>
      <Person name={personsState.persons[1].name} age={personsState.persons[1].age}>My Hobbies: Racing</Person>
      <Person name={personsState.persons[2].name} age={personsState.persons[2].age}/>
    </div>
  );
  
}

export default App;

使用多个usestate

import React, { useState } from 'react';
import './App.css';
import Person from './Person/person';
import { render } from '@testing-library/react';

const App = props=>{
  const [ personsState, setPersonsState ] = useState({
    persons:[
      {name:'Max' , age:28},
      {name:'manu' , age:24},
      {name:'Snie' , age:26}
    ]
  }
  );

  const [otherState,setOtherState]=useState('some other state');
  console.log(personsState,otherState);

  const switchNameHandler = ()=>{
    //console.log('Was Click!');
    //Do not do this
    //this.state.persons[0].name = 'Maximilian';
    setPersonsState({persons:[
      {name:'Max1' , age:281},
      {name:'manu1' , age:241},
      {name:'Snie1' , age:261}
    ]
  })
  };

  return (
    <div className="App">
      <h1>Hi i am a React App!</h1>
      <p>It is working!</p>
      <button onClick={switchNameHandler}>Switch Name</button>
      <Person name={personsState.persons[0].name} age={personsState.persons[0].age}/>
      <Person name={personsState.persons[1].name} age={personsState.persons[1].age}>My Hobbies: Racing</Person>
      <Person name={personsState.persons[2].name} age={personsState.persons[2].age}/>
    </div>
  );
  
}

export default App;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值