This is the 27th day of my participation in Gwen Challenge

Predefined DOM components

<! DOCTYPE html> <html> <head> <title>Hello React</title> <meta charset="utf-8"> </head> <body> <div id="app"> <! </div> <script SRC ="react/build/react.js"></script> <script SRC ="react/build/react-dom.js"></script> <script> </script> </body> </ HTML >Copy the code
// Replace the javascript comment in the above code with the following code: reactdom.render (react.dom.h1 (null, 'Luoyang white peony! '), document.getElementById("app") )Copy the code

After the above two pieces of code integration can be seen in the browser effective Luoyang white peony! The page.

* The example above uses the H1 component, which corresponds to the

element in HTML. DOM object, calling method: react.dom.h1 (object, child element of this component)

Example:

// multiple nested components react.dom. h1({id: 'baimudan'}, react.dom. span(null, react.dom. em(null,' alarm '), 'g'), 'baimudan! ')Copy the code

Note the difference between writing in the past:

Class --> className for --> htmlFor style --> need to change to object style:{}Copy the code

Build your own components

Create a new build:

Var Component = react.createclass ({/* Component */ /* render method */})Copy the code
Var Component = react.createclass ({render: function() {return react.dom.span (null, 'I'm royalty '); }}); // Use the Component reactdom.render (react.createElement (Component), document.getelementByid ('app'));Copy the code

You can also render components directly using ReactDOM:

ReactDOM.render(
    React.createElement('span',null,'Hello'),
    document.getElementById('app')
)
Copy the code

attribute

Once we have components, we need methods to receive properties for related rendering.

this.props

Var Component = react.createclass ({render: function() {return react.dom.span (null,'I am' + this.props. Name); }}); // Pass property reactdom.render (react. createElement(Component, {name: 'Luoyang White Peony' }), document.getElementById('app') );Copy the code

propTypes

PropTypes: You can declare a list of properties that a component needs to receive and their corresponding types.

React validates property values at run time. (2) React validates property values at runtime.

Writing:

Var Component = React. CreateClass ({propTypes: {name: React. PropTypes. String. IsRequired, / / not optional attribute address: Function () {return react.dom.span (null, 'I am' + this.props. Name); }});Copy the code

Left left left

The optional and non-optional properties appear above, so we need to provide default values for each of the optional properties, otherwise it might not work. So we need to set getDefaultProps ()

var Component = React.createClass({
    propTypes: {
        firstName: React.PropTypes.string.isRequired,
        middleName: React.propTypes.string,
        familyName: React.propTypes.string.isRequired,
        address: React.propTypes.string
    },
    getDefaultProps: function() {
        return {
            middleName: '',
            address: 'n/a'
        };
    },
    render: function() {/* ... */}
});
Copy the code

The life cycle

(1), componentWillMount

The component will be mounted

At this point, we can make API calls and get data, but we can’t do DOM manipulation

(2), componentDidMount

Components have been mounted

We can do DOM manipulation, we can update our state

(3), componentWillReceiveProps

Properties passed by the parent component change, and we can respond accordingly here

(4), shouldComponentUpdate

An optimization point is whether the component needs to be updated by returning a Boolean value, true to update, false to not update

(5), componentWillUpdate

Components to be updated

(6), componentDidUpdate

Component updated

(5), componentWillUnmount

Component destroyed

Show components & container components

(1) The presentation component (dummy component) is responsible for displaying page information according to props

(2) The container component (smart component) is responsible for data acquisition and processing

(3) Demonstrate the advantages of components and container components

  • Separate the working component from the presentation component
  • Improve component reuse
  • Improve component availability and code readability
  • Easy to test for subsequent maintenance

Three types of event binding

(1) The first method: use bind

Constructor (props) {super(props); this.showTitleFun = this.showTitleFun.bind(this); <button onClick={this.showtitlefun}> </button>Copy the code

(2) The second method: arrow function writing

ShowTitleFun = () => {this.setState()} <button onClick={this.showtitlefun}>Copy the code

(3) The third method: directly use the arrow function to return a function

ShowTitleFun () {this.setState()} <button onClick={()=>{this.showtitlefun ()}}>Copy the code

Functional component

(1) the first way: create a component page to expose the component

import React from 'react'; Export default function XXX () {return (<div> </div>)}Copy the code

(2), the second way to write: create components inside the page for external use, only for internal use of the page

Function XXX () {return (<div> I am a functional component </div>)}Copy the code

slot

Function world() {return (<div> /* equivalent to anonymous socket */ {props. Children} /* Equivalent to named socket */ <div className="abc">{props.footer}</div> </div> ) } function welcomeWorld() { const confirmBtn = ( <button OnClick ={()=>{alert('welcome')}}> set </button>); Return (<World color="green" footer={confirmBtn}> <h1> title </h1> <p> content </p> </World>)}Copy the code