Recently, I had the honor to participate in the project of an operation platform of the company. It was the first time for me to actually use REACT for project development since I had never done react projects before. It took two days or so to learn and then the liver opened. This paper mainly reviews some technical points in the project.

Project setup and packaging

Create a project with the officially supported create-React-app, and introduce the @tencent/leah-core plugin to reduce the packaging volume. First, make the following changes in the project entry file.

import App from 'components/App';
import * as LeahCore from 'xxx';

LeahCore.renderApp(App);
Copy the code

Then add externals to the WebPack configuration file.

externals: {
  'react': 'LEAH_React'.'react-dom': 'LEAH_ReactDOM'.'xxx': 'LEAH_Core',}Copy the code

Leah-core is actually the subcontracting of React and React – DOM. React is removed from the project packaging to reduce the packaging volume.

Project directory structure

  • The Components folder divides components into dumb and Smart, and dumb components do simple rendering without complex logic
  • The ConfigS folder contains mainly definitions of constants
  • The state is global in the Models folder
  • In the utils folder are the common utility functions

State management

The state management framework is concent, and the official document guides the way.

The global state managed by Concent is in the Models folder in the previous section, and Concent also allows modules to be configured by calling configure when defining certain components, mostly around the desired components, throughout the project.

The ApplyConfig module manages its own states, which are defined in the Model folder and shared by all components in the module. Students who have used VUE will immediately find that computed and watch have the same usage as computed and Watch in VUE, which makes react faster and smoother for people like me who used Vue only before. Lifecycle is defined in the lifecycle file and is particularly convenient to use.

Let’s look at how these states are used in the React component.

import React from 'react';
import { useConcent, SettingsType } from 'concent';
import { DEMO, T_DEMO } from 'configs/c2Mods';
import { CtxM } from 'types/store';

type CtxPre = CtxM<{}, T_DEMO>;
type Ctx = CtxM<{}, T_DEMO, SettingsType<typeof setup>>;

function setup(ctx: CtxPre) {
  // optional, mock componentDidMount
  ctx.effect(() = > {
    ctx.mr.changeDesc('componentDidMount some time');
    return () = > console.log('componentWillUnmount'); } []);const ins = ctx.initState({
    name: 'demo'
  })

  ctx.setState({});

  return {
    ins,
    foo: () = > console.log('call setttings.foo'),}; }function Demo() {
  const { state, settings: se, mr } = useConcent<{}, Ctx>({ module: DEMO, setup });
  return (
    <div>
      <p>Defines the module to which the component belongs</p>
      <p>Define the setup</p>
      <div>
        {state.desc}
        {se.ins.name}
        <button onClick={se.foo}>call settings.foo</button>
        <button onClick={mr.changeDesc}>call mr.changeDesc</button>
      </div>
    </div>
  );
}

export default React.memo(Demo);
Copy the code

Throughout the project, reATC components are used as function components. After the introduction of Concent, function components do not need to use hooks. UseConcent is used to introduce module states state and Reducer (Mr), which can be directly used and called in components. Also define setup. Objects returned from setup can also be imported as Settings using useConcent. The setup function is executed only once before the component is first rendered.

Using ctx.initState, you can create state within a component, and some state can be managed within a component that does not need to be shared with other components. Finally, we are completely free from the constraints of the React class component this and the various hooks of the function component.

other

React.memo 

React. Memo is a high-order component of React that can improve component performance by remembering the result of a component’s rendering.

React.Fragment

A common pattern in React is to return multiple elements for a component. Fragments allow you to aggregate a list of child elements without adding additional nodes to the DOM.

UseImperativeHandle, forwardRef

UseImperativeHandle allows you to customize the instance values exposed to the parent component when using a ref to reduce exposure to DOM element attributes retrieved by the parent component and only expose DOM methods that the parent component needs to use. UseImperativeHandle should be used together with the forwardRef.

The article recommended

React framework development with a cup of tea