Руководство по серии React From Bronze to King: Stubborn Bronze

React.js

Интерфейсный континент — это новый развивающийся сектор в мире технологий в последние годы.По мере того, как люди взаимодействуют с веб-сайтами и улучшают их производительность, количество призывателей, которые отправляются на внешний континент, чтобы попрактиковаться в Javascript, похоже на пересечение карася. река.Существует много способов культивирования, и все они разные.Будущее переднего конца паутины еще не определено, но внутренний взгляд уже начался.К счастью, основная секта переднего конца процветает и популярна , особенно React, Vue и Angular — это три столпа. Лидер, сегодняшняя история начинается с React Canyon.

Каждый внешний призыватель React Canyon, согласно пониманию стека технологий React и внешнего интерфейса, является бронзовым, серебряным, золотым, платиновым, алмазным, звездным и королем, а также соответствует семи модулям этой серии руководств.

  1. Упрямая бронза
  • Начальный этап входа в каньон, призыватель по умолчанию уже имеетES6,nodejsОсновы
  • использоватьcreate-react-appУчреждатьReactсреда разработки
  • УчитьReactОсновной геймплей в мире, такой как компонентизация,JSX, прослушиватель событий, внутреннийstate, компонентаprops, функции жизненного цикла и др.
  • Эта статья в основном знакомитReactБазовые знания, необходимые для перехода с бронзы на серебро, после прочтения вы станете серебряным.
  1. заказать серебро
  • Когда вы достигаете серебряного ранга, у вас в основном есть базовые операции, и не будет ситуации, когда вы стоите под местной башней и вас убивают.
  • Нам нужно купить скин, чтобы улучшить красоту страницы и больше практиковаться
  • Научитесь использовать Ant Financialant-designиспользование
  1. Слава Золото
  • На этом этапе Призыватель будетReactС базовым пониманием, если мы хотим еще больше улучшить наш рейтинг, нам нужно улучшить наше общее представление.
  • научиться использоватьReact-Router4Сделаем нас многогранными
  • научиться использоватьBrowserRouter,Router,Linkдругие компоненты
  • научиться использоватьReduxСотрудничайте с товарищами по команде и культивируйте общую ситуацию
  • Понимать шаблоны разработки потока данных с одним элементом иReduxразличные концепции, такие какdispatch,action,reducers
  • использоватьreact-reduxлучше иReduxПри осознании общей ситуации получить платину тоже очень легко
  1. Престиж Платинум
  • Многие карты призывателя не могут перейти на платину, потому что платина хочет перейти на алмаз, вам нужно знать больше деталей и принципов.
  • ReactПринципиальный анализ
  • Иметь глубокое понимание принципов собственных навыков, что необходимо для бриллиантов.
  1. Вечный алмаз
  • Алмазный уровень запустил режим «Знамение».Умение призывателя должно быть достаточно глубоким, чтобы идти дальше, и понимание навыков, в которых он хорош, должно быть глубже.
  • ReduxМеханизм промежуточного программного обеспечения, реализация собственного промежуточного программного обеспечения
  • Общие методы оптимизации производительности React
  • рендеринг на стороне сервера
  • ReduxВ дополнение к другим решениям для обработки данных, таким какmobx,dva
  1. Верховная звезда
  • Этот сегмент уже сам по себе сильный игрок.Цель ограничена React.Подойти к следующему уровню сложно.Необходимо понимание лежащих в основе принципов.
  • ReduxПринципиальный анализ + реализация собственногоRedux
  • React-Router+ реализовывать своиReact-Router
  • WebppackАнализ механизма и принципа работы
  • BabelАнализ механизма и принципа работы
  1. самый сильный король
  • Достигнув сильнейшего короля уже высший призыватель. Это знаменитое существование во всем каньоне React React. Я слышал, что есть также легендарный король славы выше. Я не могу добраться до него в моей жизни, и я не могу научить Вы, 囧.
  • На данном этапе рекомендую только книгу "Руководство по здоровью программиста" Сохранить физическое и психическое здоровье и стать королем славы - вопрос времени.

Начнем наш текст, упрямый бронзовый каталог

  1. Строительство окружающей среды
  2. первый компонент
  3. Вложение компонентов и передача свойств
  4. Обработка статуса
  5. Жизненный цикл

Строительство окружающей среды

По умолчанию у вас уже есть среда узла, сначала установите леса

npm install create-react-app -g

Затем создайте проект и начните

create-react-app bronze
cd bronze
npm start

См. схему ниже, что означает первыйReactприложение запущено

Открываем каталог src

src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js

index.jsЯвляется входным файлом, основной контент должен быть представлен отдельноReactа такжеReactDom, затем визуализирует компонентAppсуществует#rootна этом элементе

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />,document.getElementById('root'));

Затем сосредоточьтесь наApp.jsэто конкретное содержание нашего компонента

import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <div className="App">
        <p>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Это в принципе самое простоеReactКомпоненты, и самостоятельная реализация компонентов тоже разбита на несколько шагов

  1. import React
  2. Создайте новый класс, наследуйтеReact.Component,ReactКаждый компонент может быть записан как класс
  3. КатегорияrenderВозвращаемое значение функции — это содержимое, отображаемое на странице.
  4. renderТо, что возвращается сюда, это что-то немного странное, якобыhtmlфактическиBabelположитJSXПревратиться вReact.createElememtвыполнить
  5. из-заJSXСуть в js,classявляется ключевым словом js, поэтому используйтеclassNameзаменять
  6. если вы хотитеJSXотображать переменные, использовать{}Просто оберните

Теперь [официальный сайт Babel]](babeljs.io/repl/), видетьJSXСкомпилированный код, затем подчеркните ключевые моменты, так называемыеJSX, по сути это js объект, а дальше использоватьReactDom.renderМетод, рендеринг в DOM

// jsx
<div className="App">
  <p>hello react</p>
</div>

// 转换后
React.createElement(
  "div",
  { className: "App" },
  React.createElement(
    "p",
    null,
    "hello react"
  )
)

первый компонент

Реализуем наш первый компонент, модифицируемApp.jsдля

import React, { Component } from 'react'

class App extends Component {
  render() {
    const level='最强王者'
    return (
      <div>
        <h2>我们的目标是{level}</h2>
      </div>
    )
  }
}

export default App

из-заJSXПо сути, это js, поэтому мы можем{}Он использует выражения js и другие функции, такие как троичные, функции, переменные и т. д., а также может отображать массивы в списки.

import React, { Component } from 'react'

class App extends Component {
  render() {
    const level='最强王者'
    const isKing = true

    const title = isKing
                    ? <p>早睡早起，理性游戏</p>
                    : <h2>我们的目标是{level}</h2>

     const wordList = ['俺老孙来也','有妖气','取经之路，就在脚下']
    return (
      <div>
        {title}
        {isKing ? <p>我就是王者</p>: null}
        <ul>
          {wordList.map(v=><li key={v}>{v}</li>)}
        </ul>
      </div>
    )
  }
}

export default App

Здесь мало внимания следует уделить, то естьrender, еслиreturnНесколько элементов должны быть заключены в родительский элемент, иначе будет сообщено об ошибке.

Ставим на возвратJSXскопировать в переменную,JSXтакже можно найти в{}Тернарное выражение используется внутри, и вы можете изменить егоisKingдаfalseпопробуй

Затем, чтобы отобразить список, мы используемmapФункция сопоставляется непосредственно сJSXмассив из , помните, что каждый элемент в списке имеетkeyАтрибут, о его функции мы расскажем, когда будем говорить о виртуальном доме.

Вложение компонентов и передача свойств

Если мы продолжим разработку нашего приложения, теперь создайте другоеTankкомпоненты, которые могут быть размещены непосредственно наAppиспользуется в компоненте и может передавать свойство внутри компонента, использоватьthis.props.keyПолучать

import React, { Component } from 'react'

class App extends Component {
  render() {
    const level='最强王者'
    const isKing = true

    const title = isKing
                    ? <p>早睡早起，理性游戏</p>
                    : <h2>我们的目标是{level}</h2>
    return (
      <div>
        {title}
        {isKing ? <p>我就是王者</p>: null}
        <Tank name='程咬金'></Tank>
      </div>
    )
  }
}
class Tank extends Component {
  render() {
    return (
        <div>
          <h3>{this.props.name}是一个坦克</h3>
        </div>
    )
  }
}

export default App

Если наш компонент имеет только одинrenderМетод также может быть написан как функция, а реквизиты являются параметрами функции.Мы называем этот компонент компонентом без состояния.Особенность этого компонента в том, что возврат связан только с реквизитами, а возможность повторного использования высока.

function Tank(props){
  return (
    <div>
      <h3>{props.name}是一个坦克</h3>
    </div>
  )
}

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

Управление состоянием React и прослушивание событий

Мы инициализируем состояние в конструкторе конструктора, который на самом деле является обычным js-объектом, а затем вызываем функцию this.setState для изменения состояния.Каждый раз, когда устанавливается setState, компонент будет перерисовываться.В компоненте вы можно использовать onClick для привязки функции для наблюдения за пользователем.событие, нечего сказать, посмотрите на код

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      isKing:true
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(){
    this.setState({
      isKing: !this.state.isKing
    })
  }
  render() {
    const level='最强王者'

    const title = this.state.isKing
                    ? <p>早睡早起，理性游戏</p>
                    : <h2>我们的目标是{level}</h2>
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
        {title}
        {this.state.isKing ? <p>我就是王者</p>: null}
        <Tank name='程咬金'></Tank>
      </div>
    )
  }
}

Один из моментов, на который мы должны обратить внимание, этоconstructor, назовем его конструктором, сюда помещается состояние инициализации компонента, устанавливаемisKingдаtrue,Потомbuttonна элементеonClick, выполнятьhandleClick,существуетhandleClickВнутренний вызовthis.setStateмодифицироватьisKing

constructorв функцииbindнасильноhandleClickизthisпривязать к компоненту, иначеonClickбудет получено, когдаthisВ ссылке ошибка, есть другие формы для решения этой проблемы, писать не нужноbindэта линия

import React, { Component } from 'react'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      isKing:true
    }
    this.handleClick = this.handleClick.bind(this)
  }
  // 在constructor里手动 bind
  handleClick(){

    this.setState({
      isKing: !this.state.isKing
    })
  }
  // 绑定的时候传递箭头函数
  handleClick1(){
    this.handleClick()
  }
  // 定义的时候是剪头函数
  handleClick2 = ()=>{
    this.handleClick()
  }
  // onClick 的时候直接绑定
  handleClick3(){
    this.handleClick()
  }
  render() {
    const level='最强王者'

    const title = this.state.isKing
                    ? <p>早睡早起，理性游戏</p>
                    : <h2>我们的目标是{level}</h2>
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
        <button onClick={()=>this.handleClick1()}>点我1</button>
        <button onClick={this.handleClick2}>点我2</button>
        <button onClick={this.handleClick3.bind(this)}>点我3</button>
        {title}
        {this.state.isKing ? <p>我就是王者</p>: null}
        <Tank name='程咬金'></Tank>
      </div>
    )
  }
}

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

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

class App extends Component{
  componentDidMount(){
    console.log('组件渲染完毕')
  }
  render(){
    console.log('组件正在渲染')
    return <h2>倔强青铜</h2>
  }
}

// 组件正在渲染
// 组件渲染完毕

ReactНа разных этапах будут выполняться разные функции, я нашел в интернете картинку, на которой наглядно показаны сроки выполнения каждой функции жизненного цикла.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      isKing:true
    }
    this.handleClick = this.handleClick.bind(this)
    console.log('constructor App 的构造函数，初始化先执行')
  }
  handleClick(){
    this.setState({
      isKing: !this.state.isKing
    })
  }
  componentWillMount(){
    console.log('componentWillMount，组件 App 准备渲染')
  }
  componentDidMount(){
    console.log('componentDidMount，组件 App 渲染完毕')
  }
  shouldComponentUpdate(){
    console.log('shouldComponentUpdate，判断 App 组件是否应该渲染， 默认返回 true')
    return true
  }
  componentWillUpdate(){
    console.log('componentWillUpdate，组件 App 准备更新了')
  }
  componentDidUpdate(){
    console.log('componentDidUpdate, 组件 App 更新完毕了')
  }
  render() {
    const level='最强王者'

    const title = this.state.isKing
                    ? <p>早睡早起，理性游戏</p>
                    : <h2>我们的目标是{level}</h2>
    const wordList = ['俺老孙来也','有妖气','取经之路，就在脚下']
    console.log('组件 App 正在渲染')
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
        {title}
        {this.state.isKing ? <p>我就是王者</p>: null}

        <ul>
          {wordList.map(v=><li key={v}>{v}</li>)}
        </ul>
        <Tank name='程咬金'></Tank>
      </div>
    )
  }
}

// 首次加载打印
constructor App 的构造函数，初始化先执行
componentWillMount，组件 App 准备渲染
组件 App 正在渲染
componentDidMount，组件 App 渲染完毕

// 点击按钮修改状态时打印
shouldComponentUpdate，判断 App 组件是否应该渲染， 默认返回 true
componentWillUpdate，组件 App 准备更新了
组件 App 正在渲染
componentDidUpdate, 组件 App 更新完毕了

Помимо вышеперечисленных, существуют также

  1. React16добавленcomponentDidCatchЖизненный цикл, используемый для обработки ошибок
  2. shouldComponentUpdateвернутьfalse, то компонент не будет отображаться
  3. Если это подкомпонент, существует такжеcomponentWillReceiveProps
  4. Удаление компонента имеетcomponentWillUnmount, используется для очистки ресурсов
  5. Эффективно используйте жизненный цикл и делайте разные вещи на разных этапах. Если вы это видите, это действительно так.ReactЭто настоящая любовь, поздравляю, у тебя уже серебро в порядке, получай значок

Сегодняшний код готовgithub

Следующее уведомление: Заказать серебряную главу -- использоватьant-designБиблиотека пользовательского интерфейса, если у вас есть какие-либо вопросы, оставьте сообщение, мы также можем открыть черный и пойти к королю вместе.

Категории