زمانی که با reactJs کار میکنید به روش های مختلف میتوانید کامپوننت تعریف کنید در ادامه خواهید دید که چه شباهت ها و تفاوت هایی بین این روش ها وجود دارد.

لیست مطالب

• stateless component در reactJS
• statefull component در reactJS
• pureComponent در reactJS
• uncontrolled component در reactJS

stateless component در reactJS

stateless component یک pure function است که props را به عنوان ورودی دریافت میکند و state نمیتواند داشته باشد بنابراین به آن stateless میگویند

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

See the Pen react – stateless component by abbas hosseini (@abizebel) on CodePen.

statefullcomponent در reactJS

statefull components ها از Component به ارث میبرند و امکانت بیشتری همچون state و lifecycle ها را در اختیار کامپوننت قرار میدهند، در مثال زیر میتوانید state و componentDidMount را که یک متد lifecycle است را مشاهده کنید

class Welcome extends Component {
  constructor (props) {
    super(props);
    this.state = {}
  }
  componentDidMount (){
    console.log('after rendering component')
  }
  render () {
    return ( <h1>Hello, {props.name}</h1>)
  }
}

See the Pen react – statefull component by abbas hosseini (@abizebel) on CodePen.

pureComponent در reactJS

pureComponent ها مانند کامپوننت های statefull هستند با این تفاوت که shouldComponentUpdate را پشتیبانی میکند و همراه با آپدیت شدن کامپوننت پدرش دوباره re-render نمیشود و فقط زمانی re-render کامپوننت اتفاق میفتند که تغییری در props یا state آن رخ دهد این موضوع باعث شده که استفاده از pureComponent تاثیر بسیاری روی performance بگذارد

class Welcome extends PureComponent {
  constructor (props) {
    super(props);
    this.state = {}
  }
  shouldComponentUpdate (){
    console.log('when re render that props or ststae will change')
  }
  render () {
    return ( <h1>Hello, {props.name}</h1>)
  }
}

See the Pen react – pureComponent by abbas hosseini (@abizebel) on CodePen.

uncontrolled component در reactJS

همانطور که میدانید در reactJS جریان داده داخل کامپوننت قرار دارد که توسط props یا state مدیریت میشود، حال اگر مدیریت این جریان داده توسط DOM یعنی یکی از المان های ui تعیین شود به آن کامپوننت uncontrolled component میگویند
در مثال زیر مدیریت داده از طریق یک input میسر شده است بطوریکه هر آنچه داخل input تایپ کنید نتیجه آن در زیر آن نمایش داده میشود

class Sample extends React.Component {
  constructor (props){
    super(props);
    
    this.state = {
      value : 'this is default value'
    }
    this.input = React.createRef();
  }
  change (){
    this.setState({value :this.input.current.value })
  }
  render (){
    return (
      <React.Fragment>
        <input type="text" ref={this.input} 
          onChange={this.change.bind(this)} />
        <p>{this.state.value}</p>
      </React.Fragment>
    )
  } 
}

See the Pen react – uncontrolled component by abbas hosseini (@abizebel) on CodePen.