React Pagrindinės sąvokos – Components, Props, State

1. Components

Components yra React nepriklausomi statybiniai blokai, kuriuos galima naudoti pakartotinai. Jie yra suskirstyti į mažesnius vartotojo sąsajos elementus ir gali būti sujungti, kad susidarytų didesnis components. Pavyzdžiui, programoje gali components būti Header, Sidebar ir Content. Kiekvienas komponentas turi savo pareigas ir gali priimti props bei state rodyti atitinkamus duomenis.

Pavyzdys:

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

2. Props

Props yra React vertybės, perduodamos components iš išorės. Jie padeda perduoti duomenis iš tėvų components vaikui components. Props yra tik skaitomi ir negali būti keičiami komponento viduje. Norėdami naudoti props, perduodame reikšmes komponento atributams ir naudojame jas vartotojo sąsajos dalyje.

Pavyzdys:

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

3. State

State in React yra keičiami duomenys, kuriuos galima pakeisti komponente. Kiekvienas komponentas gali turėti savo state dinaminiams duomenims saugoti ir valdyti. Pasikeitus state, React automatiškai atnaujinama atitinkama vartotojo sąsaja. State valdomas tik klasėje components ir inicijuojamas komponento konstruktoriuje. Norėdami atnaujinti state, naudojame State metodą „nustatyti()“.

Pavyzdys:

class Counter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
  
  increment() {  
    this.setState({ count: this.state.count + 1 });  
  }  
  
  render() {  
    return( 
      <div>  
        <p>Count: {this.state.count}</p>  
        <button onClick={() => this.increment()}>Increment</button>  
      </div>  
   );  
  }  
}