React React

React Basic syntax

1. Know the JSX

• This period ofelementWhat is the tag syntax for assigning values to the right of a variable declaration?
  • We are inJSCannot assign a variable toHTMLThe element
  • If you havetype="text/babel"Remove, will report syntax error, in factIt is a JSX syntax
• What is JSX?
  • JSX is aJavaScriptSyntax eXtension, also known in many places as eXtensionJavaScript XML
  • It is used to describe our UI interface, and its completion can be used in conjunction with JavaScript
  • It is different fromVueYou don’t need to specifically learn some of the instructions in module syntax (e.gV-for, V-if, V-else, V-bind)

2. Why did React choose JSX

• ReactRender logic is intrinsically coupled with other UI logic

  • For example, the UI needs to bind events (buttons, A native, etc.)

  • For example, the UI needs to display data state, and when some state changes, the UI needs to be changed

  • They are inseparable, so React doesn’t separate the tags into separate files

  • You’re going to put them together, and that’s the Component.

• JSXWriting specification of:
  • JSXThe top of theThere can only be one root element
  • We usually findjsxWrap a parenthesis around the(a)“, which makes it easy to read
  • Note: If the label is single,Must beIn order to/>At the end

3. The JSX use

• {/* JSX */}

• Embedded variables in JSX

  • Case 1: If the variable is Number, String, or Array, the value can be displayed directly

  • Case 2: When the variable is null, undefined, or Boolean, the content is empty

    • If you want to displayNull, undefined, Boolean, can be converted to a string
    • There are many ways, such as:toStringMethod, concatenation with empty strings, and so on

  • Object type not valid as a React child
  JSX embedded expression
  Operational expression
  Ternary operator
  Call a function

React Binding properties

1. Bind common attributes

• Such as:<h2 title={title}> Bind normal attributes </h2>

2. The binding class

• Matters needing attention: 在In the JSXuseclassNameTo bindclass
• Such as:<div className="aa"> Use className to bind class</div>

3. The binding style

• Note: Wrap a pair of curly braces around the inner layer
• Such as:Div style={{color: 'red'}}> Bind style</div>

React Event binding

1.React event binding

• inReactListening event in
  • React events are named in a camelCase rather than pure lowercase
  • We need to go through{}Pass in an event handler that will be executed when the event occurs

2. This binding problem

• After the event is executed, we may need toGets the attributes associated with the object in the current classIt is needed at this timethis
  • ifFunction Event handler prints this, will find yesundefined
• Why is itundefined?
  • The reason is thatbtnClick Function andWe didn’t call itAnd when the button triggers the click event,ReactInternally calledbtnClickfunction
  • And when it calls internally, it doesn’t know how to bind correctly this
• How to solve:
  • Solution a:bindtobtnClickAccording to the bindingthis
  • Plan 2: UseES6 class fieldsgrammar
  • Scenario 3: Passing in arrow functions for event listening (recommended)

3. Pass event parameters

• Case one: Acquisitioneventobject
  • If no argument is passed, the default argument is:eventEvent parameter object
• Case two: AcquisitioneventObject and more parameters
  • When we have more arguments, our best bet is to pass in an arrow function
  • Call the event function actively, passing in other parameters that are relevant

Two points to add

• One: arrow functions are never bound to this

• Even if this is bound with call or apply, this bound by the arrow function does not take effect

  • In the arrow functionthisAgain: most recently scopedthis

• This has a higher priority than apply or call

  • evenThe back byapplyorcallThe bindingthisIt’s not gonna work. It’s stillbindThe binding ofthis

React conditional rendering

1.React conditions render

In some cases, the content of the interface will display different content depending on the situation, or decide whether to render certain parts of the content

In Vue, we control with commands such as V-if and V-show

In React, all conditional judgments are consistent with normal JavaScript code

• Method 1: Conditional judgment grammar
  • Suitable for more logical situations
• Method 2: ternary operator
  • Fit logic is relatively simple
• Logic and: operators&&
  • Render a component if the condition is true. If the condition is not true, nothing is rendered;
• The effect of v – show
  • It’s mainly about controldisplayWhether the property isnone

2.React list rendering

• In real development we would request a lot of data from the server, and the data would be stored as a list
• In React, the most common way to display lists is to use the ** of arraysmap** Higher order functions
• A lot of times we need to do something with the data in an array before we show it
  • For example, filtering out some content:filterfunction
  • For example, to intercept a portion of an array:slicefunction

3. Key in the list

• We’ll notice in the previous code that whenever we present a list, we’ll be warned:

• This warning tells us that we need to add one to the JSX shown in the listkey.
• As for how to add onekeyWhy add onekeyWe’ll talk about that latersetStateWe’ll talk about it later

The essence of the JSX

1. The nature of the JSX

• JSXjustReact.creteElement(component, pops, ... children)Function syntax sugar
  • All JSX code is eventually converted to the react. createElement function call
• createElementThree arguments need to be passed:
  • A parameter:type
    • Current ReactElement type
    • If it’s a tag element, use a string for “DIY”
    • If it’s a component element, use the component name
  • Parameters of the two:config
    • alljsxProperties in config are stored in the form of object properties and values
  • Three parameters:children
    • The contents of the tag are stored as an array of children

// jsx -> babel -> React.createElement()
// JSX will eventually convert to react. createElement(type, config, children)
const message = React.createElement("h2".null."hello world")

ReactDOM.render(message, document.getElementById("app"))
Copy the code

2. Check out Babel

• We know that the default JSX uses Babel to do the syntax conversion for us, so any JSX code we’ve written before relies on Babel
• The process of converting JSX to React. CreteElement can be found at Bebel

Virtual DOM

1. Creation process of the virtual DOM

• We’re throughReact.createElementAnd then you create oneReactElementobject
• thisReactElementWhat does an object do?ReactWhy did you create it?
  • The reason is thatReact usingReactElementObjects form aJavaScript The object tree
  • The object tree of JavaScript is the Virtual DOM
• whileReactElementThe resulting tree structure isVirtual DOM

2.JSX->VirtualDom->DOM

Declarative programming

• The virtual DOM helps us move from imperative programming to declarative programming
• React:Virtual DOMIt’s a programming concept
  • In this idea,UIIt’s stored in memory in an idealized or virtual way, and it’s a relatively simpleJavaScriptobject
  • We can get throughReactDOM.renderLet the virtualDOMAnd the realDOMIn sync, a process called coordination (Reconciliation)
• This approach to programming gives React’s declarative API:
  • You just tell React what state do you want the UI to be
  • React to make sure the DOM matches those states
  • You don’t need to do DOM manipulation directly, just free yourself from manual DOM changes, property manipulation, and event handling