6React Data Flow
Data, and moving data between the different parts of an application, is a critical piece of any interactive user interface. In this chapter, you'll learn:
- What one-way data flow means.
- The benefits of one-way data flow.
- How to initialize state in a React user interface.
- How to decide where the state should “live.”
- How to decide what data should be in state.
- Methods for updating state.
- How and why to treat state as immutable.
- How to pass data between components.
- The value of “shallow” copying and merging.
- How to validate incoming props with
PropTypes. - How and why to provide default props.
- New JavaScript syntax for working with props and state.
- How to convert between function and class components.
ONE-WAY DATA FLOW
One of the defining characteristics of React that distinguishes it from most other front-end UI libraries is its use of one-way data flow, also known as unidirectional data flow. One-way data flow means that all of the data in a React application flows from parent components to child components. Another common way to describe the flow of data in React is “Data flows down (or downstream), and events flow up (or upstream).”
While one-way data flow eliminates a common cause of complexity and errors in user interfaces, it can also create confusion and frustration unless you fully understand the ins and outs of using it to your advantage. In this chapter, I'll take a step-by-step and thorough approach, with plenty of example code, to covering everything ...
Get Beginning ReactJS Foundations Building User Interfaces with ReactJS now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
