JSX(JavaScript and XML)

Everything is JS, all in JS

<footer>
	<info />
</footer>
Copy the code

JSX is a react technology, not a new language, js extension

JSX principle

React.createElement can have only one top-level elementCopy the code
JSX Usage Basic syntax Tag type DOM Tag div P Lowercase user-defined tag -- uppercase the first letter of the componentCopy the code

Virtual DOM and non-DOM attributes

What is the virtual DOM (VIRTUAL DOM) batch diff DOM operation cost is high, a large number of calculations as little as possible to operate dom, Non-dom attributes and how to use dangerouslySetInnerHTML === innerHTML XSS ref React.createref () ID Cannot be used on function components (without instances) using keys within functions Improved rendering performance, unique identifier, index(not recommended)Copy the code

Props introduction and application

What is the props component props State How to use the props External interface to receive incoming data read only React Data flow Unidirectional component reuse unpredictability Against component design principles Middleman State Definition method Function Component Props Stateless component Class Component State Lifecycle Stateless class -- Parent and child components pass value events listening to this binding Components created by the React class need to manually bind this Binding directly to JSX elements may cause additional rendering impact on performance not recommended. Using the arrow function ES6 class field is recommendedCopy the code

State introduction and application

The interface readability of the state props cannot be modified directly to display and hide the internal state control elements of the state component. State state setState stateState is updated asynchronously. Batch delay update multiple setState merge handles efficient React controlled event handlers (onClick, OnChange) lifecycle hook functions don't update state asynchronously setState synchronously updates events bound to native JS setTimeout How to use component state how to partition state props affecting UI Presentation principles 1 UI rendering, data presentation, No complex interactive props Not applicable State function function stateless component UI component Functional component Pure function No interaction No data Display of the logical layer 2 This. Props 3 / props is read-only and cannot be modified directly. This. Scope Current component private variables use state to track state (controlling element show and hide) setStateCopy the code

React Lifecycle component Class Class component

Construtor (props) Initializing an operation State this binding componentWillMount The component is about to be mounted, Rarely using setState will not cause rerendering. Using synchronized setState will not cause side effects by setting additional render processing. The React element is not responsible for the actual rendering of the component, just returns a description of the UI. Note: It has to be a pure function, you can't change state here, setState, Can't perform any operation function computing props have side-effects/state to return to the corresponding results React createElement method JSX into vDOM componentDidMount components mounted to the dom object model after the trigger, will be called only once, 1. Ensure that when the data is obtained, the component is already in the mounted state, directly operate the DOM and initialize the third-party library. 2. Ensure that in any case, it will only be called once, and no redundant data request will be sent. Real dom can also get requests for data to be real dom data modification operations, the strength of the third party libraries words update phase componentWillReceiveProps (nextProps) props to cause the components of the update process, This. SetState Whenever the render function of the parent component is called, shouldComponentUpdate is triggered to notify the React component whether its props are changed or not, and it has the right to prevent updates from following the default behavior. The component will be re-rendered requiring that there must be a return result to reduce unnecessary rendering of the component to improve performance and not calling setState componentWillUpdate(nextProps, nextState) before the update occurs, SetState componentDidUpdate(prevProps, prevState) There is an opportunity to manipulate the DOM to determine whether it is appropriate to send network requests to send network requests uninstall phase componentWillUnmount To do some cleanup timer, cancel some network requests, remove event listenersCopy the code

Controlled components and uncontrolled components

The default value is real-time voice society to state. State must use onChange bidirectional binding advantages React data flow modification is easier to use. Dom is not required for data processing. The benefits of manipulating DOM Ref can be easily combined with third-party componentsCopy the code

React events and this

React events uninstall JSX onEventType onClick onChange onBlur Hump listening event This event is passed as a parameterCopy the code

React Hook Quick Start

React Hook 16.8 new features: Use state to create a Redux Hook. Use state to create a Redux Hook. Each time useState is rendered, the function is re-executed. After the function is executed, all memory is freed. UseEffect always performs some side effects. Function components, pure functions, props, fixed inputs always get fixed output. What side effects just want to render a DOM ->dom is done rendering, I also want to perform a bit of logic (side effect) that doesn't happen during the data-to-view conversion process before AJAX accesses native DOM objects, timer hooks, UseEffect componentDidMount componentDidUpdate useEffect component is not executed until it is rendered to the screen, and returns a function to remove the side effects. Need to synchronize with useLayoutEffect useContext useReducer redux redux useState internal is implemented by useReducer useState alternative (state, UserRef 16 react. createRef createRef method {current: UseMemo passes the creation of a function and an array of dependencies as arguments to useMemo. UseCallback receives an inline callback function and a cache of dependency array calculations. A custom Hook can be used to call the official provided Hook useState use. Redux = redux; redux = redux; redux = redux; 1. Use hooks only at the top level. Do not call a Hook in a loop, condition, or nested functionCopy the code