Реагировать на расчесывание знаний (1)

React.js

Реагировать на расчесывание знаний (1)

Я читал эти дниХа большой бородатый учительиз

Пример кода, пожалуйста, нажмите здесь

Принцип JSX

Суть jsx — синтаксический сахар React.createElement, вв документации Реакта, есть такой отрывок:

JSX не требуется для использования React. React без JSX очень удобен, когда вы не хотите настраивать компилятор в своей среде сборки.

Каждый элемент JSX — это синтаксический сахар для вызова React.createElement(component, props, ...children) , поэтому все, что вы делаете с JSX, можно сделать на чистом JavaScript.

<div class="root">
  <div class="child">hello man</div>
</div>

Наблюдая за приведенным выше кодом, мы можем знать, что каждый DOM фактически содержит только три части информации: имя тега, атрибут и дочерние элементы. Поэтому каждый элемент DOM мы можем использовать для пометки объекта js. Мы можем выразить приведенный выше код следующим образом:

{
  tag: 'div',
  attr: {
    class: 'root'
  },
  child: {
    tag: 'div',
    attr: {
      class: 'child'
    },
    child: 'hello man'
  }
}

В React мы используем React.createElement для преобразования вышеуказанного js-объекта в настоящий DOM-элемент, а что касается внутренней реализации React.createElement, то здесь мы не будем вдаваться в подробности.

Если мы вызовем React.createElement непосредственно из вашего кода, чтобы сгенерировать DOM через этот js-объект, тогда код будет выглядеть несколько длинным и громоздким, не соответствует нашему стремлению к простым идеям, тогда мы в React изобрели грамматику JSX, JSX путем мы можем писать непосредственно на js-коде в html-структуре и, наконец, в Babel для компиляции описанного выше объекта, такого как DOM js, и, наконец, для создания истинного DOM с помощью React.createElement.

компонент контейнера

В некоторых бизнес-сценариях нам может понадобиться иметь дело с большим количеством DOM с одинаковым общим макетом, но с совершенно другим содержимым макета, включая дочерние узлы, как показано на следующем рисунке:

Мы видим, что, хотя внутренние элементы в левом и правом элементах совершенно разные, они имеют одинаковую общую компоновку! В настоящее время, хотя мы можем использовать одно и то же имя и ввести один и тот же CSS для уменьшения нашей рабочей нагрузки, когда эти элементы расположены в разных компонентах, мы должны ввести один и тот же CSS для каждого компонента, а также дать им одно и то же имя класса. , очевидно, это немного громоздко. Если мы сейчас используем обычный компонент-контейнер, нам нужно только представить этот компонент-контейнер, а затем заполнить соответствующий контент, что, очевидно, сделает код более чистым и удобным в использовании.

Мы создаем новый проект React с помощью create-react-app (Пример кода, пожалуйста, нажмите здесь), удалите часть ненужного контента, чтобы наш проект выглядел более понятным, а затем создайте два компонента:

Container.js

import React from 'react';

export default class Container extends React.Component {
  constructor(){
    super()
  }
  render(){
    return (
      <div>
        Container
      </div>
    )
  }
}

head.js

import React from 'react';

export default class Head extends React.Component {
  constructor() {
    super()
  }
  render() {
    return (
      <div>
        head
      </div>
    )
  }
}

Мы вводим эти два компонента в index.js, сборку Head в компоненты Container:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Container from './container';
import Head from './head';


ReactDOM.render(
  <Container>
    <div>hello man</div>
    <Head></Head>
  </Container>,
  document.getElementById('root')
);

Откройте браузер, мы видим, что на странице, голова и не появляются, не появились Hello Man, но показывая контейнер:

Выводим контейнер на консоль:

можно увидеть в контейнереprops.childrenВ свойствах хранится содержимое, которое мы вставили в компонент Container. Нам нужно только отобразить эту информацию. Перепишем код компонента Container:

import React from 'react';

export default class Container extends React.Component {
  constructor(){
    super()
  }
  render(){
    return (
      <div className="container">
        <div className="head">{this.props.children[0]}</div>
        <div className="body">{this.props.children[1]}</div>
      </div>
    )
  }
}

Откройте браузер, мы видим, что содержимое, заполненное в компоненте контейнера, было отображено нормально, и общая структура макета, как мы ожидали. Мы можем заполнить определенные внутренние элементы в соответствии с конкретным бизнесом.

Проблема здесь в том, что когда мы прокомментировали сборку Head в компонентах Container, мы обнаружили, что вставкаhello manОн не может правильно отображать:

ReactDOM.render(
  <Container>
    <h1>hello man</h1>
    {/* <Head></Head> */}
  </Container>,
  document.getElementById('root')
);

Перепечатываем информацию компонента Container в консоль:
Мы видим, что в это времяprops.childrenЭто уже не массив, а объект, поэтому практика использования индексов для получения значений внутри компонента Container явно проблематична. нам нужно прийти прямоprops.childrenВынести суждение, чтобы определить метод получения значения, несложно, и пример кода здесь писаться не будет.

Компоненты высшего порядка (местоположение документа)

Во-первых, давайте посмотрим на эти определения:

Компонент более высокого порядка — это функция, которая принимает компонент и возвращает новый компонент.
Компонент более высокого порядка — это чистая функция, которая не изменяет исходный компонент и не имеет побочных эффектов.

Проще говоря, функцию, удовлетворяющую следующим условиям, можно назвать чистой функцией:

Возвращаемый результат полностью зависит от переданных параметров.
Побочных эффектов при выполнении нет.
Тот же вход дает тот же результат. const gen = Math.random() не является чистой функцией. (благодарныйFateRiddleправильный)

Давайте взглянем на следующие две функции, чтобы понять, что возвращаемый результат полностью зависит от переданных параметров:

let d = 1;
function add(a,b){
  return a + b
}

function all(c){
  return c + d
}

когда мы выполняемaddа такжеallчас,addВозвращаемый результат полностью зависит от параметров, переданных вaа такжеbзначение ,add(3,6)9, конечно, возвращайся, но когдаallПри выполнении,all(3)dКогда значение становится равным 2,all(3)Возвращаемое значение становится равным 5, поэтому здесьallнельзя назвать чистой функцией, и addявляется чистой функцией.

Но когда мы повторно объявляем переменную, переписываемadd:

let obj = {
  x: 2
}
function add(obj,b){
  obj.x = 1;
  return obj.x + b
}

мы звоним сноваadd(obj,6)Хотя в это времяaddВозвращаемый результат по-прежнему полностью зависит от переданных параметров, однакоobjобъектx Значение свойства изменилось, это побочный эффект, поэтомуaddне является чистой функцией.

а такжеФункция высшего порядка — это чистая функция, которая не изменяет переданный компонент.

Сказав все это, каковы используются компоненты высшего порядка?

Давайте посмотрим на следующие два фрагмента кода:

组件一：

import React from 'react';
export default class One extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      higher: 0
    }
  }
  componentWillMount(){
    let higher = this.props.higher * 2
    this.setState({
      higher: higher
    })
  }
  render() {
    return (
      <div>{this.state.higher}</div>
    )
  }
}

组件二：

import React from 'react';
export default class Two extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      higher: 0
    }
  }
  componentWillMount(){
    let higher = this.props.higher * 2
    this.setState({
      higher: higher
    })
  }
  render() {
    return (
      <h1>{this.state.higher}</h1>
    )
  }
}

Мы видим, что код точно такой же, за исключением элемента label, возвращаемого компонентом. Оба компонента находятся вcomponentWillMountВ настоящее время мы можем использовать компоненты более высокого порядка для извлечения общего логического кода:

const higher = function(Component,data){
  class Higher extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        higher: 0
      }
    }
    componentWillMount() {
      let higher = data * 2
      this.setState({
        higher: higher
      })
    }
    render() {
      return (
        <Component higher={this.state.higher}></Component>
      )
    }
  }

  return Higher
}

Вставляем в страницу примитивные компоненты и компоненты более высокого порядка:

let CopyOne = higher(One,30);
let CopyTwo = higher(Two, 40);

ReactDOM.render(
  <div>
    <CopyOne></CopyOne>
    <CopyTwo></CopyTwo>
    <One higher={10}></One>
    <Two higher={20}></Two>
    {/* <Container>
      <h1>hello man</h1>
      <Head></Head>
    </Container> */}
  </div>,
  document.getElementById('root')
);

Открываем браузер и видим:


Последние слова:

Эта заметка кратко излагает мое понимание React.Если в описании есть что-то не так, я надеюсь, вы раскритикуете и исправите его!

Категории