Reactjs & ANTD & Redux Usage Experience

1 Modular & Antd

Separate the UI into different components, each individually encapsulated

defects

There are none of the following:

• Event System (except for native DOM events)
• AJAX Features
• Data layer
• Promises
• Application Architecture

Reactjs code compression requires more than 147k

Reactjs the most code because it manages UI logic and cares about DOM rendering

Incompatible IE8

Benefits Summary

1. The use of Reactjs is easy to implement as a component. Give me a chestnut: https://ant.design/components/popconfirm/again like https://ant.design/components/progress/
2. Easy maintenance with relatively clear code logic
3. Use state operations to manage DOM, never need to manipulate DOM
4. For complex projects, combine redux or other data management & routing management scenarios, or mess
5. About Antd, mainly with the help of Reactjs, this simple component building method is characterized by fast start-up, feature-rich, rapid construction of front-end platform class projects. Of course, if the UI is too big for your project, it's not very useful.

2 Managing data streams with redux

Issue 1 Lightweight components work well when rendering simple static pages, but if the page interacts, you must pass a callback function between the components to handle the event. In particular, complex web page structure, often requires multiple components layer nesting, resulting in callback functions must also be passed between parent and child components, code into mess, maintenance is difficult.

Issue 2 The state of the parent layer component is easily passed down to the lower component, which in turn is cumbersome.

Question 3 It's easy to add a state when you start writing code, and you're not under control.

Management of data and views of the Reactjs itself

State = Component = OnChange = SetState = state

This works well for individual components, but becomes bloated once data transfer between components is involved

Redux Data management:

store = state = Component = OnChange = dispatch (action) = Reducers = Store

Features: Data Management Center, ignoring the Reactjs component structure and component relationships, as long as the release action can change the state, thus changing the view

Cons: data also involves business logic, which is not conducive to component decoupling, so when writing a single reusable component, avoid introducing redux

3 managing pages with router

Resolve synchronization mappings between react components to URLs

The view mechanism when mobile marketing platform: HTTP://GITLAB.SHINEMO.COM/UB-WEB/F2EMOBILE/BLOB/DEVELOP/SRC/COMPONENTS/HOME/SMVIRTUALVIEW.JSX

Disadvantage: It is inconvenient to trigger the view state of the parent component when the page jumps.

The routing mechanism of the developer platform Http://gitlab.shinemo.com/Ub-Web/f2e-developer/blob/develop/src/route/index.js

Using the Router Management page is more clear and convenient.

Reactjs & ANTD & Redux Usage Experience