React ： Class & Functional

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;