Knowledge points that need to be learned

1. Fifter usage

2. Courtship number %

JSX list rendering

The list of rendering

In real development we would request a lot of data from the server, and the data would be stored as a list:

  • Songs, artists, chart lists;
  • Data on items, shopping carts, and review lists;
  • Such as friends’ messages, news feed, contact list data;

React does not have a V-for directive like the Vue syntax, and requires us to organize data in JavaScript code into JSX:

  • Many students who transition from Vue to React are not used to it and think that Vue is more concise and clear.
  • JSX in React works seamlessly with JavaScript, making it more flexible.
  • Another thing I often mention is React is a way to really improve our ability to write code;

How do you present a list?

  • In React, the most common way to display lists is to use the map higher-order function for arrays;

The map function syntax for arrays looks like this:

  • Callback: a function that generates a new array element, taking three arguments:

    • currentValue

      The current element being processed in the callback array.

    • The index of the optional

      The index of the current element being processed in the callback array.

    • An array of optional

      The array called by the map method.

  • thisArgOptional: ExecutecallbackFunction time values are used asthis.
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array
}[, thisArg])
Copy the code

Let’s rehearse the previous example:


class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      names: ['abc'.'cba'.'nba'.'mba'.'dna'].numbers: [110.123.50.32.55.10.8.333]}}render() {
    return (
      <div>
        <h2>The name list</h2>
        <ul>
          {
            this.state.names.map(item => {
              return <li>{item}</li>})}</ul>
        <h2>Digital list</h2>
        <ul>
          {
            this.state.numbers.map(item => {
              return <li>{item}</li>})}</ul>
      </div>
    )
  }
}

ReactDOM.render(<App/>.document.getElementById("app"));
Copy the code

Array processing

Most of the time we need to do something with an array before we can show it:

  • For example, filter something out: the filter function
  • Take, for example, the slice function that snatches a portion of an array

For example, I currently have an array containing a series of numbers: [10, 30, 120, 453, 55, 78, 111, 222]

Example requirement: Get all numbers greater than 50 and show the first three arrays

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      numbers: [10.30.120.453.55.78.111.222]}}render() {
    return (
      <div>
        <h2>Digital list</h2>
        <ul>
          {
            this.state.numbers.filter(item => item >= 50).slice(0, 3).map(item => {
              return <li>{item}</li>})}</ul>
      </div>
    )
  }
}

ReactDOM.render(<App/>.document.getElementById("app"));
Copy the code