Chapter 4 JSX and the virtual DOM

1. Virtual DOM

  • Virtual DOM: A tree of JavaScript objects representing the actual DOM, a tree made up of ReactElement. React will turn it into a real DOM.

Why not use the actual DOM? It is difficult to track the state of the DOM to manipulate it into the desired form; Modifying DOM code is high, resulting in performance degradation.

  • ReactElement: Representation of the DOM element in the virtual DOM, created by createElement().
  • CreateElement (): three arguments: the DOM element type, the elements props, and the elements children

The child element must be a ReactNode object, which can be one of three: ReactElement, ReactText (string or number), or ReactNode array

  • Reactdom.render (): method of rendering ReactElement with three parameters: the root node of the virtual tree, the real DOM of the mount location, and the component rendered/updated callback function
var boldElement = React.ReactElement('b'.null.'TEXT')
var mountElement = document.querySelector('#root')
ReactDOM.render(boldElement,mountElement)
Copy the code

2, JSX

Take care of creating the ReactElement object for us;

JSX trap
  • Class vs. className: Classes are JavaScript identifiers, so classnames are used to identify classes in JSX;
  • For vs. htmlFor: For is a JavaScript identifier, so htmlFor is used to pass attributes in JSX;
  • Data -: To apply attributes not covered by HTML to an HTML native component, you must prefix the attributes with data-; Custom components can apply any property.

Chapter 5 advanced component configuration with props, state, and children

A, props,

1, PropTypes

PropTypes: A way to verify the values passed by props

class MapComponent extends React.Component {
    static propTypes = {PropTypes are defined by setting the static class propTypes attribute
        zoom:PropTypes.number,
        plsce:PropTypes.object,
        markers:PropTypes.array
}
Copy the code
2, getDefaultProps ()

GetDefaultProps (): Gets the default props

class MapComponent extends React.Component {
    static getDefaultProps = {// By setting the static property getDefaultProps
        zoom:1
}
Copy the code

2. Context

React is responsible for passing the context variable down the component tree. Use React. CreateContext () to define the Provider/Consumer context.

  • Provider: This component is dedicated to passing context;
  • Consumer: This component is a child of the Provider and accesses the context from the Provider component.
export const ThemeContext = React.createContext(themes.dark);// React. CreateContext receives a default value provided by the context

class App extends Component {
  state = {theme: themes.dark};
  changeTheme = evt= > {// Modify global variables
    this.setState(state= > ({
      theme: state.theme === themes.dark ? themes.light : themes.dark
    }));
  };
  render() {// Themecontext. Provider passes a value
    return (
      <div className="App">
        <ThemeContext.Provider value={this.state.theme}>
          <Header />
          <button onClick={this.changeTheme}>Change theme</button>
        </ThemeContext.Provider>
      </div>); }}export const Header = props= > (// The child of themecontext.consumer is a method that accesses the property passed in
  <ThemeContext.Consumer>
    {theme => (
      <header
        className="App-header"
        style={{backgroundColor: theme.background}}
      ></header>
    )}
  </ThemeContext.Consumer>
);
Copy the code

Multiple contexts

export const Body = props= > (
  <ThemeContext.Consumer>
    {theme => (
      <header
        className="App-header"
        style={{backgroundColor: theme.background}}
      >
        <UserContext.Consumer>
          <h1>{user => (user ? 'Welcome back' : 'Welcome')}</h1>
        </UserContext.Consumer>
      </header>
    )}
  </ThemeContext.Consumer>
);
Copy the code

Stateless components

Stateless components are encouraged because of their variability and complexity.

Stateless component: A functional component that passes parameters down through props and has only the Render () method, not a class. Using stateless components can improve performance because components are set up and removed less, and there is no lifecycle approach.

const Header = function(props) {
  return (<h1>{props.headerText}</h1>)}Copy the code