There are many times we play with state and props in javascript how it's different in react.
Those who don't know about the difference of state and props So I thought it will be a good idea to write a blog post about it.
You may ask, if data is only flown downwards from components to components, how could we access data we need from the previous component?
The answer to that is props.
React uses props to transfer data we need to different components.
Props and state are related.For parent-child communication, simply pass props.
Use state to store the data your current page needs in your controller-view.
Use props to pass data & event handlers down to your child components.
These lists should help you while working with data in different components.
Props:
- Props is immutable.
- Used to pass data down from your view-controller.
- Better performance
- Use this to pass data to child components
State:
- State is mutable
- Should be managed in your view-controller.
- Worse performance
- Don't access this to from child components, pass it down with props instead
The state of one component will often become the props of a child component.
Props are passed to the child within the render method of the parent as the second argument to React.createElement() or, if you're using JSX, the more familiar tag attributes.
From the child's perspective, the name prop is immutable. If it needs to be changed, the parent should just change its internal state:
and React will propagate it to the child for you.
A natural follow-on question is: what if the child needs to change its name prop?
This is usually done through child events and parent callbacks. The child might expose an event called, for example, onNameChanged.
The parent would then subscribe to the event by passing a callback handler.
The child would pass its requested new name as an argument to the event callback by calling,
e.g., this.props.onNameChanged('New name'), and the parent would use the name in the event handler to update its state.
Those who don't know about the difference of state and props So I thought it will be a good idea to write a blog post about it.
You may ask, if data is only flown downwards from components to components, how could we access data we need from the previous component?
The answer to that is props.
React uses props to transfer data we need to different components.
Props and state are related.For parent-child communication, simply pass props.
Use state to store the data your current page needs in your controller-view.
Use props to pass data & event handlers down to your child components.
These lists should help you while working with data in different components.
Props:
- Props is immutable.
- Used to pass data down from your view-controller.
- Better performance
- Use this to pass data to child components
State:
- State is mutable
- Should be managed in your view-controller.
- Worse performance
- Don't access this to from child components, pass it down with props instead
The state of one component will often become the props of a child component.
Props are passed to the child within the render method of the parent as the second argument to React.createElement() or, if you're using JSX, the more familiar tag attributes.
The parent's state value of childsName becomes the child's this.props.name.
From the child's perspective, the name prop is immutable. If it needs to be changed, the parent should just change its internal state:
this.setState({ childsName: 'New name' });
and React will propagate it to the child for you.
A natural follow-on question is: what if the child needs to change its name prop?
This is usually done through child events and parent callbacks. The child might expose an event called, for example, onNameChanged.
The parent would then subscribe to the event by passing a callback handler.
The child would pass its requested new name as an argument to the event callback by calling,
e.g., this.props.onNameChanged('New name'), and the parent would use the name in the event handler to update its state.
0 comments:
Post a Comment