• JSX

    • A component class must implement onerenderMethod, this onerenderMethod must return a JSX element.
    • In JSX you can insert JavaScript expressions, and the result returned by the expression will be rendered to the page accordingly. The expression with{}The parcel
    • JSX can place any expression content.

  • props

    • You can do this by adding class properties to the componentdefaultPropsTo configure the default parameters.
    • propsOnce passed in, you cannot modify it inside the component. But you can pass in new ones via active re-rendering by the parent componentprops“, so as to achieve the effect of update.

  • The event

    • If you want to use the current instance in the event function, you need to manually pass the instance methodbindTo the current instance and pass it to react.js.
    class Title extends Component {
  handleClickOnTitle (e) {
    console.log(this)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this)}>The React little book</h1>)}}Copy the code
    • bindWe bind the instance method to the current instance, and then pass the bound function to the react.jsonClickEvent listening. At this point you look again, clickh1Will print out the current instance:

  • setstate

    • This leads to a second use of setState, which takes a function as an argument. React.js passes the result of the last setState to this function, which you can use to perform operations, manipulate, and then return an object to update the state

    • We do setState three times, but actually the component will only be rerendered once, not three times; This is because inside react. js setstates in the same message queue in the JavaScript event loop are merged before the component is rerendered.

      The underlying principle isn’t too much to worry about, just remember: when using React. Js, you don’t need to worry about performance issues with setState multiple times.

  • State is for the component to control its own state, while props is for the external to configure the component itself.

  • In general, lists in React. Js are processed and rendered using maps.

  • For elements listed on the page as an expression nesting array, each element is assigned a key attribute, which must be a unique identifier for each element.

    . class Index extends Component { render () {return (
      <div>
        {users.map((user, i) => <User key={i} user={user} />)}
      </div>)}}...Copy the code

    Keep one thing in mind: in a real project, if your data order might change, it is standard practice to use the id returned by the background data as the key of the list element.