Project address: github.com/mirrorhanyu…

Sweep code experience

Applets are organized according to the official recommended code structure

├─.EditorConfig ├─.Eslintrc ├─ Global.d.ts ├─ package.json ├─ project.config Config │ ├ ─ ─ dev. Js │ ├ ─ ─ index. The js │ └ ─ ─ the prod. Js └ ─ ─ the SRC ├ ─ ─ app. The SCSS ├ ─ ─ app. The TSX ├ ─ ─ common. SCSS ├ ─ ─ index. The HTML ├ ─ ─ Actions ├── Components │ ├─ Activity │ ├─ Common │ ├─ Footer │ ├─ Search │ Trending ├── Constants ├─ Pages ├─ Reducers Exercises ── Different Types Exercises ── exercises ── wemarkCopy the code

Lifecycle and event callback functions

Taro follows the React syntax specification, adopts the same componentization concept, and maintains a consistent component lifecycle. At the same time, each page of the applet specifies the initial data of the page, life cycle callbacks, event handlers, etc. See the official documentation for details.

The React based

Before we begin, we can briefly review the basic concepts of React.

Elements (Elements)

We know that in the React application

Elements are the smallest building blocks of React apps.

Element is the smallest unit in React. It describes what should be displayed on the screen.

const element = <h1>Hello, world</h1>;
Copy the code

Element is immutable, defined to determine what it looks like. If you think of an ever-changing Component (such as a countdown Component) as a constantly running movie, an Element is a frame that describes what should be displayed on the screen at that second. To render an element on the screen, update it with reactdom.render (Element, document.getelementByid (‘root ‘)).

Componentization (Components)

The idea of componentization is to break up the UI you see into separate, reusable components. Component can be understood as a function. The inputs are props and the outputs are elements. Such as:

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

If using ES6 syntax:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>; }}Copy the code

When we want to render a Component,

const element = <Welcome name="Han"/ >;
ReactDOM.render(
  element,
  document.getElementById('root')
);
Copy the code

{name: ‘Han’} is the props for the input,

Hello, and Han

is the output. The render function will render on the corresponding nodes and React will only update the nodes that need to be updated.

Props

React is fairly flexible, but has one very strict rule:

All React components must act like pure functions with respect to their props.

React requires that we cannot change props and must be a pure function. How do you change the output so that the UI changes dynamically without changing the input? So we have,

State

State is similar to props, but State is private and fully controlled by the current component. State allows the React component to dynamically change its output based on user actions, network responses, or other changes. Three points need to be paid attention to in this example:

  1. SetState () to modify state
  2. SetState () asynchronous. For performance reasons, React may combine multiple setState() calls into one call.
  3. The setState() merge is shallow because State is private, and if you want to pass State, you can only pass it “top-down” through props as the input parameter to child components. This usually becomes a one-way data flow.

What if both components need the same data source, or if sibling components communicate? In general, we can promote it to the nearest common parent of these components. But is there another way?

Flux

Flux is a web design Architecture proposed by Facebook

The core idea of Flux is to realize a one-way data flow. In simple terms, when a user performs an action, an action is dispatched from the component, which flows to the Store, which changes the state based on the action, and which triggers the component to re-render based on the new state.

Such an implementation helps separate the view from the business logic. The business logic controls the central data source on which the view is rendered.

Redux

Redux is an implementation based on the Flux idea. Redux’s Three Principles

  1. Single data source The state of the entire application is stored in an object tree that exists in only one store.
  2. State is read-only and the only way to change State is to trigger an action, which is a generic object that describes events that have occurred.
  3. To describe how an action changes the State Tree, you need to write reducers.

Redux’s single data stream looks like this:

  1. Call the store. The dispatch (action)
  2. The Redux store passes the current state tree and actions to the Reducer function to calculate the next state.
  3. The root Reducer should merge multiple sub-Reducer outputs into a single state tree.
  4. The Redux store saves the complete state tree returned by the root Reducer.

Also, to read some data from the Redux state tree and feed that data to the component to render via props, the React Redux library provides the connect() method. Connect Can accept the following parameters

  1. MapStateToProps specifies how to map the current Redux store state to the props of the presentation component
  2. The mapDispatchToProps() method receives the Dispatch () method and returns the callback method expected to be injected into the props of the presentation component

How is the home page data displayed

First connect method, mapStateToProps(), mapDispatchToProps()

@connect(({trending}) = > ({
  trending
}), (dispatch) => ({
  fetchDevelopers(since, language) {
    dispatch(fetchDevelopers(since, language))
  },
  fetchRepositories(since, language) {
    dispatch(fetchRepositories(since, language))
  },
  fetchLanguages() {
    dispatch(fetchLanguages())
  }
}))
Copy the code

Get Trending Language in Component’s componentDidMount lifecycle callback

this.props.fetchLanguages()
Copy the code

Dispatch dispatches the corresponding action

export const fetchLanguages = (a)= > {
  return async (dispatch) => {
    try {
      dispatch({ type: FETCH_TRENDING_LANGUAGES_PENDING})
      const response = await Taro.request({
        url: 'https://example.com/trending-languages'.method: 'GET'
      })
      dispatch({ type: FETCH_TRENDING_LANGUAGES_FULFILLED, payload: [ ...response.data] })
    } catch (e) {
      dispatch({ type: FETCH_TRENDING_LANGUAGES_REJECTED, payload: e })
    }
  }
}
Copy the code

The corresponding Reducer processes the receipt of the current state tree and action to calculate the next state

export default function activity(state = {} as ActivityState, action) {
  switch (action.type) {
    case FETCH_ACTIVITIES_PENDING:
      return {
        ...state, isActivitiesUpdated: false
      }
    case FETCH_ACTIVITIES_REJECTED:
      return {
        ...state, isActivitiesUpdated: true
      }
    case FETCH_ACTIVITIES_FULFILLED:
      return {
        ...state,
        isActivitiesUpdated: true.activities: action.payload,
        username: action.addition.username,
        maxPagination: action.addition.maxPage,
        currentPagination: action.addition.currentPagination
      }
   }
}
Copy the code

Remember the mapStateToProps in Connect? When state changes, the props in the Component changes, causing the Component to re-render.

taro build

In local development

Yarn dev: repealing p //taro build --type repealing p -- watch monitors file changesCopy the code
Yarn build: repealing p //taro build --type repealing p Does not listen for file changes, but does compress and package codeCopy the code

If you do, try to do something about it. If you do, try to do something about it. If you do, try to do something about it. The max-page in the header is resolved to max-page

Continuously optimized

  • Component splitting in a project can be more nuanced
  • Actions Duplicate code
  • Sass management
  • Connect compute attribute
  • test

Refer to the link

  1. Flux In-Depth Overview

  2. Redux Motivation

  3. Why Use React Redux

  4. React Performance Optimizing