Hello, everyone. I'm Carson. The code volume of React can be said to be quite large. Is there a function in such a large library that is not mentioned in the document but actually exists ? the answer is yes. this article will introduce you to hidden egg features that are not mentioned in three documents. ref cleanup in the current React , Ref has two data structures: <T>(instance: T) => void {current: T} for most requirements, we will use the second data structure. It is also the data structure returned by useRef and createRef . the first data structure is mainly used for DOM monitoring. For example, in the following example, the size of div is reflected in the height state: function MeasureExample() { const [height, setHeight] = useState(0); const measuredRef = useCallback(node => { if (node !== null) { setHeight(node.getBoundingClientRect().height); } }, []); return ( <div ref={measuredRef}>Hello Kasong</div> ); } but in the above example, the size change of DOM cannot be reflected in real time to the height state. To reflect real-time changes, you need to use native API that monitors DOM , such as ResizeObserver , monitor DOM size change IntersectionObserver , monitor DOM visual area changes MutationObserver , monitor DOM tree changes these API are usually event-driven, which involves unbinding events when monitoring is not needed. since event binding occurs in the ref callback, naturally, unbinding events should also occur in the ref callback. For example, modify the above example with ResizeObserver : function MeasureExample() { const [entry, setEntry] = useState(); const measuredRef = useCallback((node)…

recently I saw some useful React tool libraries, summed up and shared them with you to avoid duplicating wheels. I hope it will be helpful to you ~ I. basic 1. React Infinite Scroller React Infinite Scroller is used to load content indefinitely in a React project. npm address: www.npmjs.com/package/rea... 2. react-dnd React DnD is a set of React high-level components created by React and Dan Abramov, the core author of Redux, that can help build complex drag-and-drop interfaces while keeping components separate. It is mainly used for drag and drop of components. npm address: www.npmjs.com/package/rea... 3. react-beautiful-dnd react-beautiful-dnd is a beautiful and easy-to-use React list drag-and-drop library. ​ npm address: www.npmjs.com/package/rea... 4. react-icons using react-icons, you can easily include popular icons in React projects. ​ npm address: www.npmjs.com/package/rea... 5. react-share react-share is a React social media sharing button and sharing library. ​ npm address: www.npmjs.com/package/rea... 6. create-react-app Create React App is a command line interface tool that allows you to quickly create and run React applications without any configuration. ​ npm address: www.npmjs.com/package/cre... 7. react-intl React Intl provides a React component and Mixin for internationalizing React Web applications. It provides a description of formatted date, number, and string messages. ​ npm address: www.npmjs.com/package/rea... 8. react-router react-router is a routing solution routing solution for React.js. It can easily synchronize your app and URL while providing first-class support for nesting, transformation, and server rendering. ​ npm address: www.npmjs.com/package/rea... 9. React Virtualized react-virtualized is a responsive component that renders large list and table data efficiently and can be used to solve long…

controlled and uncontrolled components React the concept of controlled and uncontrolled components is relative to the form. In React , the form element usually holds the internal state , so it works differently from other HTML elements. The different implementation of state within the form element results in controlled and uncontrolled components. controlled components in the HTML form elements, they usually maintain a set of state and update UI as the user inputs. This behavior is not controlled by our program. If we establish a dependency between the state attribute and the value of the form element in React , then update the state attribute through the onChange event and setState () . You can control what happens to the form during user input. React form input elements that control values in this way are called controlled components. & nbsp; if a input input box is defined in React , it does not have the same bi-directional binding function as v-model in Vue , that is to say, we do not have an instruction to combine the data with the input box, and the user enters the content in the input box, and then the data is updated synchronously. class Input extends React.Component {   render () {     return <input name="username" />   } } when users enter content in the input box on the interface, it maintains a state . This state is not the this.state that we usually see, but the abstract state on each form element, so that we can update the UI according to…

redux-- getting started with instance TodoList Tip the front-end technology is really changing with each passing day. I'm embarrassed that I don't have a data stream when I finish React. looked through flux with anticipation, and was simply impressed by the official stream of consciousness documents. Is it really smelly and long, or is it my IQ problem? 😖 turned to redux. The more you read it, the more interesting it becomes. Follow the document to make a small example of how to get started with TodoList. Don't say much nonsense, first post the source code github.com/TongchengQi of the examples used in the article. Github warehouse github.com/rackt/redux of redux advantage with the development of spa (not SPA, but single-page applications), in the case of react, the idea of componentization and state machines really liberates the vexed dom operation, and everything is in a state. State to manipulate changes in views. however, because of the componentization of the page, each component must maintain its own set of states, which is fine for small applications. but for larger applications, too many states appear complex, and in the end, it is difficult to maintain, and it is difficult to organize all states clearly, and this is also true in multi-person development, resulting in some unknown changes, and the more troublesome it is to debug later. In many cases, the change of state is out of control. For inter-component traffic, server rendering, routing jump, update debugging, we need a mechanism to clearly organize the state of the entire application, redux should come into being,…

simple preparation quickly build react projects through create-react-app install dependent npm install redux react-redux redux-thunk-- save (redux-thunk is middleware for handling asynchronous data streams) change, create a new project directory effect diagram Demo start write redux related content action export const Increment = 'increment' export const Decrement = 'decrement' /*Action creator action constructor*/ export const increment = (counterIndex) => { type:Increment, counterIndex } export const decrement = (counterIndex) => ({ type: Decrement, counterIndex }) Action is essentially a JavaScript normal object. A type field of string type must be used in action to represent the action to be performed, but you need to write as many action as you need to write action, so you need action creator. This action constructor returns a js object. Of course, you need to return a function when dealing with asynchronous data. In this case, middleware is needed to rewrite dispatch. reducer import { Increment, Decrement } from '../Action' export default (state,action) => { const {counterIndex} = action switch (action.type) { case Increment: return {...state, [counterIndex]:state[counterIndex]+1} case Decrement: return {...state, [counterIndex]:state[counterIndex]-1} default: return state } } the specific definition of reducer can be found in the redux README. Since demotion is too simple, let's split and merge reducer. Here we mainly introduce the workflow of redux in react. Note here that reducer is a pure function and cannot change state. The new state returned here can use Object.assign and the object extender of es6. store import {applyMiddleware, createStore} from 'redux' import thunk from 'redux-thunk' import reducer from '../Reducer' const initValue={ 'First':1, 'Second':5, 'Third':6 }…

in the past year, more and more projects continue or begin to use React and Redux development, which is a common front-end project solution in the front-end industry, but as there are more and more development projects, individuals have different feelings and ideas. Is it because we already have a relatively common and familiar technology stack of the project that we have been using it completely? is there a more suitable solution than it? Just as the team recently had a new project, bloggers began to wonder if it was possible to develop using alternative technologies. It can not only improve the development efficiency, but also expand the technology reserves and horizons. After research, we chose Mobx, and finally built a new project using React+Mobx. This article summarizes and shares the more complete process from technology selection to project implementation, hoping to make common progress. Preface when we use React to develop web applications, within React components, we can use this.setState () and this.state to process or access intra-component states, but as the project grows larger and the states become more complex, we usually need to consider the problem of communication between components, which mainly includes the following two points: A state needs to be shared (accessed, updated) among multiple components; interaction within one component needs to trigger status updates for other components; with regard to these issues, React component development practices recommend improving the state of common components: Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common…

I. what is redux Redux is a JavaScript container for state management. Redux supports other interface libraries besides being used with React, and its volume is only about 2kb . three cores of Redux single data source the state of the entire application is stored in an object tree, and this object tree exists only in the only store . State is read-only the only way to change state is to trigger & nbsp; action , which is a normal object used to describe events that have occurred. use pure functions to perform modifications to describe how action changes state tree, you need to write & nbsp; reducers . Redux composition State status state, ui state, global state returned by the server action event is essentially a js object needs to include the type attribute describes what is going to happen, but does not describe how to update state reducer is essentially a function response to the action sent The function takes two parameters, the first initializing state and the second sending action must have a return return value Store maintain the state (status) of the application (state, ui state, global state returned by the server) provide getstate method to read state used to associate action with reducer build store through createStore register to listen through subscribe dispatch method to send action

Why should we use React-Redux Redux itself is a separate state library, and it can be used in any UI framework, such as React , Angular , Vue , Ember , and vanilla JS , although Redux is usually used with React, they are actually independent of each other. if we are using Redux in any UI framework, we usually need a UI binding library to bind Redux to the UI framework we use, rather than manipulating the store state directly from our UI code. React-Redux is actually the official Redux UI binding library. So, when we are in React and Redux, we also need to use React-Redux to bind the two libraries together. While it is possible to write Redux store subscription logic by hand, doing so would become very repetitive. In addition, optimizing UI performance would require complicated logic. although you can manually write the logic of Redux's status subscription, doing so is a repetitive task. In addition, optimizing the performance of UI requires complex logic. The process of subscription status, checking for data updates, and triggering re-render can become more generic and reusable. UI binding libraries such as React Redux can handle the logic of state interaction, so we don't need to write the relevant code ourselves. Why is my component not re-rendered, or why is my mapStateToProps not running? accidentally changing or modifying the state directly is the most common reason why components do not re-render after a scheduled operation. Redux wants our reducers to be "immune" to update its status, which in effect means always…