ReactHook +Typescript goes from starter to practice

@ The author of this article ruoduan.cn reprint please indicate the source

• origin

  I will be fully responsible for the background management of IM instant chat, which will be added to the company’s mid-stage system. The front-end technology selection Want to use the relatively new is hot technology – reactHook + react – Router5 + Typescript + (mobx | useContext + useState), as for the brackets later answer, I think it can replace mobx and Redux state management to some extent

• This article will cover Typescript, React-hook, and reacthook. TSX (practice)
  • Typescript
    • Project structures,
    • The type definition
    • Application analysis
    • …

- react-hook ⭐️ - usestate-useeffect - useContext -... Redux, mobx, redux, React, redux, redux, redux, redux, redux, redux, redux, redux, redux, Redux, Redux, Redux, ReduxCopy the code

All right, let’s get started

Typescript

React-typescript project setup

The NODEJS environment requires a Not download link

We use the create-react-app scaffolding to build the React-typescript project environment directly

Version requirements NodeJS 8+, Yarn 0.25+

npx create-react-app my-app --typescript

npm init react-app my-app --typescript

yarn create react-app my-app --typescript
Copy the code

Typescript project files

// src. /react-app-env.d.ts // global declaration file tsconfig.json // typescript configuration fileCopy the code

{"compilerOptions": {"experimentalDecorators": true, "target": "es5", // language compile target" lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "React" / / component syntax environment}, "include:" [/ / compile target directory "SRC",]}Copy the code

declare var jQuery: (selector: string) => any;

jQuery('#foo');
Copy the code

React-hook

React is divided into two components: a class component and a function component

The difference between

By comparison, we can see that traditional function components have no state and life cycle

So in previous development, functional components were often supplemented as simple components

React-hook allows us to use state component state management in functional components, implement declaration cycles — side effects, and greatly simplify code, making it simpler and easier to understand

userState

import React, { useState } from 'react'; Const [count, setCount] = useState(0); function Example() {const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }Copy the code

class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); }}Copy the code

Effect Hook

Effect Hook allows you to perform side effects in function components

Look at the code below

import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); UseEffect (() => {title document.title = 'number ${count}'; }); Return (< div > < p > Numbers {count} < / p > < button onClick = {() = > setCount (count + 1)} > + 1 < / button > < / div >). }Copy the code

Equivalent to the class

lass Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() {document.title = 'digit ${this.state.count}'; } componentDidUpdate() {document.title = 'digit ${this.state.count}'; } render() {return (<div> <p> number {this.state.count} </p> <button onClick={() => this.setState({count: this.state.count + 1 })}> + 1 </button> </div> ); }}Copy the code

We can see the difference in the class component componentDidUpdate we repeat the definition of the life cycle, componentDidMount

• A little bit of analysis: what are we using the data in the state of the class for?

  • We know that the data defined in state in the class component we will re-render the DOM tree after the data is updated

  • UseEffect is called after a DOM update has been performed. In this effect, we set the Document title property, but we can also perform data fetching or call other imperative apis.

  • Note ⚠️ : By default, it is executed after the first render and after every update. (We’ll talk about how to control it later.)

What useEffect does is simply tell the React component to do something after rendering, UseEffect = componentDidMount (); useEffect = componentDidUpdate (); useEffect = componentDidMount (); useEffect = useEffect () They will determine the 'type' of the side effect according to the order of the 'return value' written in front of the useEffect and the destruction-return function: ### useEffect === componentDidMount 🌰 for example we want to request data when the page is mounted and render to the page let [list, SetList] = useEffect([]) // Get data const getList = async () => {let res = await axios(' XXX ')} // Side effect function mounted only once UseEffect (() => {getList()}, []) ### useEffect === componentDidUpdate 🌰Copy the code

let [list, setList] = useEffect([]) let [data, SetData] = useEffect(store.rows) const getList = async () => {let res = await axios(' XXX ') const getStore = () => { @observer let res = store.getxxxxx ... UseEffect (() => {getList()}, []) / / need to remove the side effects of function useEffect (() = > (() = > getStore) ())Copy the code

At this point we have a basic understanding of the use of reactHook. Basic 'Redux' is based on the previous useReducer, and the createContext. Const [state, dispatch] = useReducer(reducer, initialArg); It receives a Reducer of the form (state, action) => newState and returns the current state and its accompanying dispatch method. (Look familiar, you've used redux's children's shoes.)Copy the code

General flow chart

import * as React from 'react' const { useContext, useReducer, CreateContext} = React // Return status according to action.reduce function reducerInAction(state, Action) {if (typeof action.reducer == 'function') {return action.reducer(state)} return state} // Handle store data export default function createStore(params) { const { _State = {}, reducer } = { ... params, reducer: ReducerInAction} // Use createContext to manage state data distribution Let netxState = reducer(lastState, action) store._state = netxState return netxState } const store = { _state: _State, dispatch: undefined, getState: () => { return store._state }, useContext: () => {return useContext(Appcontext)}} // Const Provider => {const [state, dispatch] = useReducer(upReducer, _State) if (! store.dispatch) { store.dispatch = async (action) => { if (typeof action === 'function') { await action(dispatch, store.getState()) } else { dispatch(action) } } } return <Appcontext.Provider {... props} value={state} /> } return { Provider, store } }Copy the code

Use ⬆ ️

import * as React from 'react' import HooksRedux from '@/HooksRedux' const { Provider, store } = _HooksRedux({ State: Const Add_action = () => {return {type: 'ADD', reducer(state) {return {... state, age: state.age + 1 } } }Copy the code

@ Reference Documents

Practice (TSX + Hook)

– No decisionAny– anyscript

– React.FC

We can see code like this:

const app: React.FC = () => {
    ...
}
Copy the code

FC = Functional Component SFC = Stateless Functional Component (deprecated)

FC

= react. FunctionComponent

In some cases, it’s ok if you don’t add it, so that you can tell Typescript about your function components

– jsDoc and interface

– Generic and type

Take the following code for example

let _userList: Array<object> = []
let [userList, setUserList] = useState(_userList)

let _userList: object[] = []
let [userList, setUserList] = useState(_userList)
Copy the code

You can use either method, but you don’t code them

Generics have more powerful uses

function createArray<T>(length: number, value: T): Array<any>
    ...
    
function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']
Copy the code

– Union type and return value

function getLength(something: string | number): number {
    return something.length;
}
Copy the code

– the plugin

Use ESlite to standardize the code we write

• AlloyTeam ESLint

• reference

• Ps TS error information Quick reference list