React ： Class & Functional_react function和class-优快云博客

本文深入探讨了在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;