Однодневный вводный курс обучения React

Должен прочитать перед прочтением

Эта статья написана в спешке, ее можно рассматривать как учебную заметку и как учебную статью начального уровня. Если вы только начинаете, возможно, вам больше подойдут вводные видеоролики. Но если у вас есть некоторые знания, такие какVue, то видео не подходит. После прочтения этой статьи рекомендуется просмотреть изображение в уме, перейти на официальный сайт для углубленного чтения и некоторых углубленных статей и подумать, что будет очень хорошее улучшение.

"

Фреймворк — это не прочитать несколько статей, написать демо, можно сказать, что вы его знаете, вы с ним знакомы. Требуется постоянная практика, преодоление ям и изучение принципов. Думайте больше, чтобы освоить. я просто комбинируюVueнепрерывныйReactОбучение — это только вершина айсберга. в лучшем случаеAPIпортье.

- - QAQ

Инициализировать проект

Новички по-прежнему рекомендуют официальные строительные леса, черезnpxДля инициализации проекта демо-проект.

npx create-react-app 项目名称

В случае созданного по умолчанию каталога деконструкция проекта выглядит следующим образом.

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----          20.6.15     14:21                public
d-----          20.6.15     16:41                src
-a----          20.6.15     14:21            310 .gitignore
-a----          20.6.15     14:22            746 package.json
-a----          20.6.15     14:21           2884 README.md
-a----          20.6.15     14:22         526017 yarn.lock

затем черезnpmилиyarnдля запуска проекта. воплощать в жизньshellавтоматически откроет браузер, когда вы увидитеlocalhost:3000после рендеринга. Тогда вы можете открыть дверь в React

#  npm shell 命令
npm run start

# yarn shell 命令
yarn start

Рендеринг элемента React — JSX

существуетVueсерединаtemplateШаблоны широко используются, пока вы можете писатьHTMLТогда тебе, маленькому умному призраку, не составит труда. а такжеReactиспользуется для возврата непосредственно в функцииDOM. Это выглядит очень волшебно, а также заставляет некоторых друзей немного смущаться, когда они начинают, но если есть определенная основа, вVueнаписано наRenderДля функций, я думаю, очень легко начать. Это выглядит следующим образом. по сути этоcreateElementпроцесс. Поэтому метод рендеринга этого шаблона называетсяJSX.

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>你好呀</h1>
      <p>今天又是充满希望的一天...</p>
    </div>
  );
}
export default App;

пройти черезReactМеханизм шаблонов JSX, который в конечном итоге отображает его в DOM.

привязка переменных

существуетVueв шаблоне через{{}}Две фигурные скобки для объявления ограничения, указывающие, что поле в этом объявлении является значением js, а не текстом. В React используется{}Фигурная скобка для условности. тогда ты можешьDOMиспользуется вjs. Ниже приведенClassкомпоненты, будетstateизtextзначение связано вDOMиз.

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      text: '我是wangly19'
    }
  }

  updateText () {
    this.setState({
      text: '我是帅气的wangly19'
    })
  }

  render () {
    return (
      <div className="App">
        <p>我是一个动态的数据: {this.state.text}</p>
        <button onClick={ this.updateText.bind(this) }>更换</button>
      </div>
    )
  }
}

условный рендеринг

существуетVue, если вам нужно динамически отображать узел, это черезv-ifДирективы реализованы, в React можно использовать операторы для рендеринга элементов. пройти черезVueДавайте проведем сравнение.

"

пройти через&&(或)оператор для достиженияv-ifтот же эффект.

- - QAQ

render () {
  return (
    <div className="App">
      <p>我是一个动态的数据: {this.state.text}</p>
      {/* { <p v-if="true">2</p> } */}
      {true && <p>2</p>}
    </div>
  )
}

"

Тернарный оператор может использоваться для достиженияv-ifа такжеv-elseтот же эффект.

- - QAQ

render () {
  return (
    <div className="App">
      <p>我是一个动态的数据: {this.state.text}</p>
      {/* { <p v-if="true">2</p> } */}
      {true ? <p>true</p> : <p>false</p>}
    </div>
  )
}

Рендеринг списка

пройти черезmapметод обхода узлов некоторой базовой структуры данных.

"

Его можно пройти через карту, которая поставляется со структурой данных.value,index,keyсуществуетreturnВозвращает информацию об узле в .

- - QAQ

обработка событий

существуетJavaScriptв, черезonClickпривязать событие.

<button onclick="activeBuff">激活按钮</button>

А в jsx черезonClickатрибут, за которым следует метод шаблона рендеринга jsx.

"

должны знать о том,Class组件внизthisОн не существует, и пользователю необходимо вручную привязать его к методу и вызвать метод события щелчка.

- - QAQ

<button onClick={ this.activeBuff.bind(this) }>激活按钮</button>

компоненты

Как мы все знаем,Vueа такжеReactвсе компонентные решения, то вReactКак создать компонент в ? существуетReactВ новой версии запустилReact Hooksстроить планы. Так что теперь мейнстримClassкомпоненты иFunctionкомпоненты.

Компонент класса

Способ создания компонента класса очень прост, вам нужно только создатьClassкласс и пусть он наследуетReact.Component,существуетRenderметодreturnИз шаблона JSX.

При этом через конструктор обработкаProps. и объявитьstateСостояние инициализирует объект, который будетPropsподняться наsuperначальство.

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
    }
  }
  // render函数
  render () {
    return (
      <div className="App">
        <p>我是Class组件</p>
      </div>
    )
  }
}

Функциональный компонент

вместе сReact HooksПосле выхода основное направление разработки постепенно сместилось на функциональные компоненты, ноClassКомпоненты по-прежнему будут использоваться в старых проектах. Так что всему научитесь. По сравнению с компонентами класса функциональные компоненты очень просты. Можно возвращать шаблон рендеринга внутри функции. следующим образом:

import React from 'react'

function FunctionDemo () {
  return (
    <div>
      我是函数组件
    </div>
  )
}

export default FunctionDemo

Состояние компонента класса

Здесь мы сосредоточимся на открытии одной главы, в основном наClassв компонентеStateзначение изменяется, так как функциональные компоненты лучше всего использовать сhooks, так что просто возьмите его и в основном решите егоClassпод компонентыStateусловие. существуетReactПрямая модификация не рекомендуетсяStateзначение, вместо этого используйтеsetStateспособ обновить статус.

this.setState({
  default: '修改后的文件'
})

такой же,setStateВедь текущее значение напрямую не меняется. Это асинхронная функция, и последнее состояние можно получить в асинхронной функции.

Если вам нужно накопить вычисленное значение, рекомендуется использовать форму возвращаемого значения функции.

"

Принцип здесь тот жеVues компонентdataФункцияreturnСпособ. Если вы используете объектный метод, в несколькихsetStateЕсли он используется, он будет перезаписан последующими задачами, чтобы его можно было выполнить сразу один раз.

- - QAQ

// no
this.setState({ index: this.state.index + 1 });
this.setState({ index: this.state.index + 1 });

// yes
this.setState({ index: this.state.index + 1 });
    this.setState({ index: this.state.index + 1 });
this.setState((prevState, props) => {
  return {quantity: prevState.quantity + 1};
});

компонент связи

Компонентная коммуникация — это функция, которая часто используется в разработке, и можно сказать, что это одна из душ. Так как же осуществляется взаимодействие компонентов React?

Дочерний компонент получает значение реквизита родительского компонента.

пройти черезPropsЭто может заставить дочерний компонент очень быстро получить переданный контент родительского компонента.

• 1. Добавьте имя свойства и данные для дочернего компонента

<ClassDemo name="wangly19"></ClassDemo>

• 2. Используйте реквизит в классе

constructor (props) {
  super(props)
  this.state = {
    defaultText: '我是默认的文字'
  }
}

• 3. Используйте

пройти черезthis.props.父组件绑定的属性名称

<p>{ this.props.name }</p>

Определите свойство реквизита по умолчанию

существуетVueможно определить вPropsЗначение по умолчанию для , даже если пользователь не передаст его, будет отображаться значение по умолчаниюPropsсодержание, определенное в .

ClassDemo.defaultProps = {
  name: '我是默认的名称'
  // ... 参数列表
}

Дочерний компонент передает родительский компонент

пройти черезPropsПередайте функцию, когда дочернему компоненту необходимо изменить значение родительского компонента, передайтеthis.props.[函数]Выполнить обратный вызов.

// 父组件
class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      childMessage: '2222222222222222'
    }
  }

  onPropChange (newVal) {
    this.setState({
      childMessage: newVal
    })
  }

  render () {
    return (
      <div className="App">
        <p>{ this.state.childMessage }</p>
        <ClassDemo onPropChange={ this.onPropChange.bind(this) }></ClassDemo>
        {/* <FunctionDemo></FunctionDemo> */}
      </div>
    )
  }
}

import React from 'react';

class ClassDemo extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      defaultText: '我是默认的文字'
    }
  }

  changeText () {
    this.props.onPropChange('111111111111111')
  }

  render () {
    return (
      <div className="App">
        <button onClick={ this.changeText.bind(this) }>更改文本</button>
      </div>
    )
  }
}
export default ClassDemo;

Жизненный цикл

После прочтения официального введения в жизненный цикл оно довольно краткое. После выбора шаблона компонента, когда он будет готов, вы можете выполнять некоторые логические операции после загрузки компонента, такие как карта бога градостроительства.

устанавливать

constructor

Инициализация конструктора, выполняется первым, инициализируетсяStateи т.п.

getDerivedStateFromProps

Это статический метод, который необходимо добавить передstaticсвойства

render

Функция рендеринга, которая возвращает отрендеренный контент. Этот метод также срабатывает при обновлении страницы.

componentDidMount

После того, как компонент смонтирован, компонент был смонтирован в это время

возобновить

getDerivedStateFromProps

Компонент будет обновлен. Здесь параметры соответствуют содержимому, которое было изменено до и после, а логическое значение возвращается, чтобы указать, нужно ли обновлять представление.

render

Когда представление обновляется, тоRenderтакже будет обновляться

getSnapshotBeforeUpdate

getSnapshotBeforeUpdateсуществуетrenderПозжеcomponentDidUpdateПредыдущий вывод похож на промежуточное ПО, используемое для выполнения некоторых операций захвата.

componentDidUpdate

getSnapshotBeforeUpdate, с тремя параметрамиprevProps,prevState,snapshot, указывая на предыдущуюprops,предыдущийstate,а такжеsnapshot.snapshotдаgetSnapshotBeforeUpdateвозвращаемое значение

constructor (props) {
  super(props)
  this.state = {}
  console.log('1.constructor构造函数')
}

componentDidMount () {
  console.log('componentDidMount')
  Store.subscribe(() => {
    this.setState({})
  })
}

static getDerivedStateFromProps (nextProps, prevState) {
  console.log('getDerivedStateFromProps')
  console.log(nextProps, prevState)
  return true
}

getSnapshotBeforeUpdate (prevProps, prevState) {
  console.log(prevProps, prevState)
  return 'top: 200'
}

componentDidUpdate (prevProps, prevState, snapshot) {
  console.log(prevProps, prevState, snapshot)
}

componentWillUnmount () {
  console.log('componentWillUnmount')
}

changeText () {
  Store.dispatch({
    type: 'changeName',
    value: '我是ClassDemo中修改的名字： wangly'
  })
}

render () {
  console.log('3.render函数')
  return (
    <div className="App">
      <p>{ Store.getState().redux_name }</p>
      { this.state.redux_name }
      <button onClick={ this.changeText.bind(this) }>更改文本</button>
    </div>
  )
}

удалить

componentWillUnmount

Когда компонент выгружен, мы можем сбросить некоторые таймеры и отменить сетевые запросы.

Слот компонента

Слоты не новы для Vue, вReactВставленные узлы будут начинаться сPropsспособ передачи. в состоянии пройтиpro1ps.childrenнайдено и представлено.

// 父亲组件
<ClassDemo onPropChange={this.onPropChange.bind(this)}>
  <h1>插入的元素 </h1>
</ClassDemo>

// 子组件
<div className="App">
  {this.props.children}
  <button onClick={this.changeText.bind(this)}>更改文本</button>
</div>

маршрутизатор

Маршрутизация является первоочередной задачей для SPA-приложений, без нее страница не может быть приложением, а может называться только страницей. Эти два мира разделены.

установить реакцию-маршрутизатор-dom --save

# shell
npm install react-router-dom --save

Создать шаблон маршрута

Маршрутизация известна в VuemodeЕсть два, одинhashодинhistoryмодель. Они заключаются в следующем: путем введения различных пакетов для создания различныхRouter.

// histoty
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
// hash
import { Link, Route, HashRouter as Router } from 'react-router-dom';

Создайте простой маршрут

выйти через какRouterМаршрутизация пакетов осуществляется быстро, черезLinkКак контейнер поведения для прыжков. Такой базовый контейнер маршрутизации завершен.

"

нужно использоватьRouteМожно использовать декларативную конфигурацию компонента.Linkнайти о.

- - QAQ

import React from 'react';
// histoty
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
// hash
// import { Link, Route, HashRouter as Router } from 'react-router-dom';

function Page1 () {
  return (
    <h1>我是Page1</h1>
  )
}

function Page2 () {
  return (
    <h1>我是Page2</h1>
  )
}

function Page3 () {
  return (
    <h1>我是Page3</h1>
  )
}

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
    }
  }

  render () {
    return (
      <div className="App">
        <Router>
          <ul>
            <li>
              <Link to="page1">Page1</Link>
            </li>
            <li>
              <Link to="page2">Page2</Link>
            </li>
            <li>
              <Link to="page3">Page3</Link>
            </li>
          </ul>
          <Route exact path="/page1" component={ Page1 }></Route>
          <Route exact path="/page2" component={ Page2 }></Route>
          <Route exact path="/page3" component={ Page3 }></Route>
        </Router>
      </div>
    )
  }
}
export default App;

маршрутизация по значению

Обычно используются параметры прохождения маршрутаparamа такжеqueryпараметр. ДаваяtoСпособ передачи объекта для передачи данных. можно увидеть, чтобыpage1добавил маршрут в:idУказывает, что его необходимо доставитьparamизidзначение, при объявленииsearchтекст иstate对象Параметры передаются различными способами. для использования в разных сценариях.

;<div className="App">
  <Router>
    <ul>
      <li>
        <Link
          to={{
            pathname: '/page1/10',
            search: '?roles=[10, 20]',
            state: { name: 'wangly19' },
          }}
        >
          Page1
        </Link>
      </li>
      <li>
        <Link to="page2">Page2</Link>
      </li>
      <li>
        <Link to="page3">Page3</Link>
      </li>
    </ul>
    <Route exact path="/page1/:id" component={Page1}></Route>
    <Route exact path="/page2" component={Page2}></Route>
    <Route exact path="/page3" component={Page3}></Route>
  </Router>
</div>

Ручной прыжок

когда вы используетеHistoryПри маршрутизации иногда вам нужно активно переходить на определенный маршрут, но в это время вы не можете инициировать поведение узла, поэтому в это время вы можете перейти через API. как использовать иVueНеплохо.

// 跳转页面
this.props.history.push(参数和to的内容像素)
this.props.history.push('page1')

// 重定向页面
this.props.history.replace('page2')

Конечно, естьhashизgoметод.

Управление состоянием Redux

Reduxпохоже наVuexРешение глобального состояния для , его функция в основном используется для хранения общедоступного глобального состояния. Чтобы облегчить управление некоторыми общими параметрами конфигурации и обеспечить хорошее управление статусом для проектов с большими объемами бизнеса и сложной структурой.

"

Старайтесь не использовать его, если он конкретно не нужен проекту.

- - QAQ

Установить Редукс

# shell
npm install redux --save

Создать состояние магазина

Это очень легко понять, когда вы видите официальную демоверсию. Ниже приведен официальный код, вы можете увидеть процесс с первого взгляда.

import { createStore } from 'redux'

/**
 * This is a reducer, a pure function with (state, action) => state signature.
 * It describes how an action transforms the state into the next state.
 *
 * The shape of the state is up to you: it can be a primitive, an array, an object,
 * or even an Immutable.js data structure. The only important part is that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * In this example, we use a `switch` statement and strings, but you can use a helper that
 * follows a different convention (such as function maps) if it makes sense for your
 * project.
 */
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counter)

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// However it can also be handy to persist the current state in the localStorage.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

• Создать стойку

// 声明默认的State状态值
const modeStore = {
  redux_name: '我是Redux中声明的名称：wangly19'
}
// 声明Reducer
const reducer = (state = modeStore, action) => {
  return state
}
// createStore
import { createStore } from 'redux';
import reducer from './reducer'
const store = createStore(reducer)
export default store

• просмотр рендеринга

import Store from './index'
<p>{ Store.getState().redux_name }</p>

• Отправка поведения при обновлении триггера

<button onClick={ this.changeText.bind(this) }>更改文本</button>

// dispatch
changeText () {
  Store.dispatch({
    type: 'changeName',
    value: '我是ClassDemo中修改的名字： wangly'
  })
}

Предпосылка заключается в том, что необходимоactionспособ сделать заявление. Похож на ВексAction.

const reducer = (state = modeStore, action) => {
  switch (action.type) {
    case 'changeName':
      const newState = {...state}
      console.log(state)
      newState.redux_name = action.value
      console.log(newState)
      console.log(state)
      return newState
  
    default:
      return state;
  }
}

• Отслеживайте изменения.

"

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

- - QAQ

componentDidMount () {
  /**
   * 回调函数
   */
  Store.subscribe(() => {
    console.log(Store.getState().redux_name)
    this.setState({})
  })
}

Hooks

"

Крючки Собираюсь писать новые статьи.

- - QAQ

Суммировать

Многое изучение React начинается с идеи Vue, чтобы не задавать три вопроса. Я также понимаю, что знаю одного и знаю третьего. Если у вас есть основы, это не очень сложно научиться. Но его документация не такая полная, как у Vue, и в некоторых отношениях. Провел день, разбираясь с некоторыми базовыми учебными вещами

"

Если вы считаете это полезным, пожалуйста, поставьте лайк.

- - QAQ

использованная литература

Реагировать на документацию

Личное понимание жизненного цикла реакции

шаблон реакции

Реагировать на маршрутизацию

Redux