Divide the UI into component trees

In the traditional model, we think like this:

  • createhtmltemplate
  • throughjavascriptTake the page data and present it to the page
  • Listening to theformThe data,submit buttonBind commit event

If it isReact Component, you can split the page as ⬇️ :

And the code form:

class CommentBox extends Component {
  render() {
    return (
      <div class="comment-box">
        <h1>Comments(3)</h1>
        <CommentList />
        <CommentForm>
      </div>); }}Copy the code

Obviously, this split method makes the structure simpler and clearer.

What is the React component

Components allow you to break up the UI into separate reusable pieces of code and think about each piece individually.

Components, conceptually similar to JavaScript functions. It takes an arbitrary input parameter (props) and returns a React element that describes what the page displays.

(props: attributes passed in externally; State: state of internal maintenance)

The React component has three features:

  1. Components typically do not provide methods, but rather are a state machine (whatever the state is, the result is)
  2. A component can be thought of as a pure function (the arguments correspond to the results)
  3. One-way data flow (parent component can pass to child componentprops, but the child component cannot modify what the parent component passesprops, child components can only pass througheventNotifies the parent component of data changes.

Create a simple React component

Are these three points clear

There are three aspects to consider when creating a component:

  1. Creating a static UI
  2. Consider component state composition (controlled component or uncontrolled component)
  3. Consider how components interact (within components and component consumers)

Controlled components vs. uncontrolled components

Controlled components: Form element state is maintained by the consumer

In the input example, value and onChange need to be specified. The value of value depends on what comes in from the outside, not what the user enters, right

<input value={this.state.inputMsg} onChange={this.handleChange} />
Copy the code

Uncontrolled components: Form element state is maintained by the DOM itself

There is no need to specify value and onChange, but the external world needs to access the value through a native DOM Node.

<input ref={(node) = > (this.input = node)} />
Copy the code

The design process

  1. Break up the UI
  2. Build a static version of the application (should be usedprops, and avoidstate ）
  3. Add interactivity, the ability to trigger changes to the underlying data model. (Used in this casestate)
  4. determinestateThat is, which component can change thesestateOr having themstate.
  5. Add a reverse data flow

Note that:

  • It is best to keep the processes of rendering the UI and adding interactions separate. This is because a static version of an application often requires a lot of code without much interaction detail; Adding interactive features takes a lot of detail and doesn’t require much code.
  • It’s more convenient to use a top-down approach when your application is simple. For larger projects, it’s easier to build from the bottom up and write tests for lower-level components at the same time.
  • You should find the minimum representation of state required by your application and calculate all the other data as needed. For example, in a to-do list application, you only need to save an array of all items, rather than a separate onestateVariable (used to store the number of tasks, withlengthYou can get).

Two principles for creating components

When to create components: The single responsibility principle

Since a component is the smallest element to build a UI, these two things need to be done:

  1. Each component does only one thing ~
  2. If a component becomes complex, it should be split into multiple components

The benefit of doing this is not only to break down complexity, but also to improve performance; Page refreshes can be locked down to smaller areas.

Data state management: DRY principle

DRY: Don ‘t Repeat Yourself

  1. States that can be computed should not be stored separately
  2. Components are as stateless as possible, and the required data is determined bypropsTo facilitate the reuse of components

The resources

  • The React concept: zh-hans.reactjs.org/docs/thinki…

Introduction to the React

  • React: What were you thinking before writing components?
  • React: Talk about JSX
  • React: Full lifecycle and methods
  • React: Learn about the Virtual Dom and its policies
  • React: Two techniques for component reuse (High order components & Render Props)