Интенсивное чтение документации React (часть 1)

• pre-notify
• Что такое элемент в React
  • условный рендеринг
• элемент и компонент
• Визуализировать реагирующие элементы
• компонент и чистая функция
• Функциональные и классовые компоненты
• штат / штат
  • setState
    • Механизм автоматического слияния при обновлении настроек состояния
    • setState является асинхронным
• компоненты и события
  • Отличия от нативных событий
  • this
• форма
  • состояние и управляемые компоненты
    • value = {null}
    • О выборе
    • О файле
  • refs и неконтролируемые компоненты
• списки и ключи
  • ключ и перерисовать
  • ли и
  • Значение ключа не может быть получено
  • Индексы не рекомендуются в качестве ключей

pre-notify

previously:JSX, понятно?

(づ￣ 3￣)づЭта статья будет постоянно обновляться в соответствии с изменениями документа

Что такое элемент в React

В прошлый раз мы объяснили, что такоеJSX,JSXэто расширение синтаксиса Javascript в React, которое позволяет нам использоватьJSX tagпостроить виртуальный DOM как миниатюрную версию реального DOMдокумент описания(это сам объект Javascript).

один изJSX tagтолько одинReact Element.

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

мы сказалиJSXОн может участвовать в управлении процессом js, поэтому мы можем передатьifкласс, чтобы решитьReact ElementКогда рендерить, а когда нет.

let element =  (
    <div>
      {isLogin}&&
      <h2>hello {userName}</h2>
    </div>
  );

Тернар также поддерживается

элемент и компонент

Выше мы уже знаемJSX tagтолько одинReact Element, ноJSX tagтакже может бытьReact Component.

это выглядит так

let elements = <Component10086 />

Этот. . . Он отличается от предыдущего?

Сначала нужно обратить внимание на представителяComponent/компонентыJSX tagдолжен быть написан с большой буквы, в противном случае он будет отображаться как обычный элемент.

Эм. . . Естественно мы зададимся вопросом, а чем отличается рендеринг как обычного элемента от рендеринга как компонента?

фактически,Компоненты в React похожи на функции в Javascript., может принимать произвольные входные данные (мы называем их реквизитами) и может возвращать элементы React, что совпадает с тем, что мы получаем напрямуюReact ElementРазница в том, что мы можем снова инкапсулировать элемент внутри функции, выполнить некоторый условный рендеринг, установить состояние и так далее.

---

Итак, давайте просто создадимJSX tagнедостаточно, нам также нужно определить соответствующую функцию

function Component10086(props){
  return <h1>Hello Component!</h1>;
}

Эта функция имеетprosсвойства, мы можем создатьJSX tagПри передаче параметров этой функции, например

let elements = <Component10086 prop1='第一个参数' prop2='第二个参数' />

// --- --- ---

//也支持... 来传递多个属性
let data = {
 prop1:'第一个参数'
 ,prop2:'第二个参数'
}
let elements = <Component10086 {...data}/>

надprop1а такжеprop2Две пары ключ-значение будутупакован какpropsобъектПередать в качестве параметра функции

function Component10086(props){
  return (
  <h1 className={props.prop2}/*当做属性渲染*/>
  	Hello Component!
    {props.prop1} //当做children渲染
  </h1>;
  )
}

[important] Уведомление: В статье JSX мы сказали, что JSX является расширением синтаксиса javascript, что означаетJSX tagОн может быть назначен переменной js, может участвовать в управлении процессом for и if, может быть передан как параметр функции и может использоваться как возвращаемое значение функции.Когда компоненту So передаются параметры, тег JSX также может быть передан в качестве параметра.

---

Визуализировать реагирующие элементы

Мы уже знаем, как построить виртуальный DOM для описания реального DOM.

let element = <h1 className={class1}>hello React!</h1>

(После того, как вышеприведенное скомпилировано с помощью babel, мы можем обнаружить, что на самом деле он вызываетReact.createELementЧтобы создать объект javascript для описания реального дома, я уже подробно говорил в прошлый раз, поэтому не буду вдаваться в подробности)

[опасность] При импорте библиотеки реагированияReactОн должен быть написан с заглавной буквы, потому что после компиляции, когда мы вызываем метод createElement, это React с заглавной первой буквой.

Но как преобразовать этот виртуальный DOM в реальный DOM для рендеринга на странице?

Это то, что мы делаем в Reactreact-domБиблиотека тоже что-то делает. После импорта этой библиотеки мы можем вызватьrenderМетод отображает соответствующий реальный DOM для указанноготочка крепленияначальство.

import ReactDOM from 'react-dom';
...

ReactDOM.render(
    element
    ,document.geElementById('root')
)

Стоит отметить, что если этоReact Elementперерисовывается,react только повторно отобразит измененный узел dom в этом элементе. (Мы сказалиJSX tagТы можешь иметьchildren).

---

Точно так же мы можем визуализировать компонент таким же образом,

ReactDOM.render(
    <Component10086 prop1='...' />
    ,document.geElementById('root')
)

Так,renderКак отличить, визуализируется ли компонент или обычный элемент?

мы называемReactDOM.renderсделатьJSX tagчас,

Сначала мы проверим, является ли первая буква тега заглавной, если она заглавная, значит, этоcomponent, тогда react отобразит его как компонент,

это будет сначалаJSX tagСвойства, переданные в качестве параметров, инкапсулируются в объект реквизита, а затем этот объект передается функции компонента.

После того, как функция компонента получит объект параметра, она выполнит ряд операций и, наконец, вернет обработанный объект.React element.

наконец,renderПолучите элемент, преобразованный в настоящий элемент DOM, и отобразите его на странице.

компонент и чистая функция

оReact Component, нам нужно обратить внимание на то, что все компоненты реакции должны быть чистой функцией.

Что такое чистая функция?

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

Что React официально дает, так это то, что один и тот же ввод будет производить тот же вывод, и мы не можем изменить переданное в функцию.props.

это означает,propsОн статичен и неизменяем, но некоторые свойства некоторых очень интерактивных компонентов пользовательского интерфейса часто меняются.

Итак, как решить эту проблему? Это то, что будет позже, я расскажу об этом позжеReact stateиспользуется для решения этой проблемы.

[important] Уведомление:Если имущество не участвуетrender(), то будетне следуетпредназначен дляstate

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

Компоненты бывают двух видов: функциональные и классовые.

//function
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

//class
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ReactDOM.render(<Welcome name='ahhh' age='123'/>,document.getElementById('root'));

На данный момент эти два способа написания эквивалентны, но!

Форма класса class поддерживает некоторые функции, которые не поддерживаются функциональными компонентами, напримерstate.

штат / штат

первыйstateТоже реквизит, но отличается от обычногоprops.

обычныйpropsмы можемJSX tagЗагрузить параметры, реакция автоматически поможет нам упаковать эти параметры и смонтировать их на компоненте (this.props).

а такжеstateНам нужно вручную установить его на компонентном объекте,

setState

Сначала мы в компонентеинициализацияэкземпляр компонентаstate

class Clock extends React.Component{
  constructor(props){
    super(props);
    // 在构造函数内部定义初始状态
    this.state = {date:new Date()};
  }

если этоstateИзменения должны произойти, мы должны быть осторожны, мы не можем просто пройтиthis.state.date = xxxЧтобы изменить состояние в этой форме, это не сработает.render()перерисовано.

нам нужно пройтиthis.setStateметод (от унаследованного React.Component), чтобы изменить исходныйstate.

грамматика:setState(updater[, callback]),Обратите внимание, что этот метод поддерживает обратные вызовы

this.setState({
  date:new Date()
})

Также оsetStateЕсть два дополнительных момента, на которые следует обратить внимание

Механизм автоматического слияния при обновлении настроек состояния

Мы можем инициализировать несколько в одном конструктореstateпара ключ-значение

...
this.state = {
    state1:'xx'
    state2:'yy'
}
..

React stateМеханизм автоматического слияния при обновлении позволяет нам обновлять состояние следующим образом.

this.setState({
    state1:'aaa'
})

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

setState является асинхронным

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

Итак, как решить эту проблему?

фактическиsetStateСуществует также вторая форма, которая использует функцию обратного вызова вместо объекта для обновления.state,так

this.setState((prevState,props)=>({counter:prevState.counter + Math.random()}));
this.setState((prevState,props)=>({counter:prevState.counter + props.increment}))

Стоит отметить, что такой подходsetState(updater[, callback])Синтаксическая сахарная форма , все равно в конечном итоге скомпилируется для выполнения таким образом.

компоненты и события

Отличия от нативных событий

• Имена событий React имеют верблюжий регистр вместо родного нижнего регистра.
• Строка передается при нативной привязке, а реакция использует {}

//原生
<button onclick="activateLasers()">
  Activate Lasers
</button>

//React
<button onClick={activateLasers}>
  Activate Lasers
</button>

• Объект ev в реакции инкапсулирован в реакцию
• возврат false не поддерживается

function ActionLink() {
  function handleClick(e) { //这个event不是原生的，而是自己封装的，故不存在兼容问题
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

this

Если это компонент, определенный в виде класса, нам нужно обратить внимание на указание this в функции события.

В реакции нам не нужно вручную использоватьaddEventListenerПривяжите функцию события к элементу, просто нужноJSX tagПросто зарегистрируйте событие, как встроенную встроенную функцию события.

Но есть проблема, react не поможет нам указать это в обратном вызове на экземпляр компонента,Даже это не указывает на элемент DOM, к которому он должен быть привязан..

мы надеемся на этоthisУказывает на экземпляр компонента, чтобы мы могли смонтировать компоненты на этом экземпляре компонента.state. Существует около трех способов изменить обратный вызов, на который указывает это.

• Привязать обработчики событий через bind
• Обертывание обработчиков событий стрелочными функциями
• Создайте обработчики событий с синтаксисом инициализатора ES7.

Мы рекомендуем третий, который очень удобен

handleClick = ()=>{
    this.setState(...);
}

форма

состояние и управляемые компоненты

Обычно, когда мы вводим ввод, мы сразу же получаем соответствующий дисплей в интерфейсе.

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

Как это делается? Это через то, что мы сказали раньшеReact state.

Сначала я хочу сделать значение ввода равнымstate

 <input type="text" onChange={this.handleChange.bind(this,'username')} value={this.state.username}/>

Мы знаем, что в состоянии может только реагировать только путем призванияsetStateвызоветrenderВызывает перерисовку пользовательского интерфейса, что означает, что пока мы не вызовем setState сразу, значение ввода не изменится сразу.

В приведенном выше примере мы привязываем событие к входу длявойтиобрабатывать

handleChange = (key,event)=>{
    let val = event.target.value;
    this.setState({[key]:val})
}

Это завершает наш ввод в формуперехвачен, чтобы он был под нашим контролем, такой элемент формы мы называем управляемым компонентом.

---

Следует отметить, что мы использовали es6 в верхнем каштане.computed propertyграмматика

setState({[key]:val})

в{[key]:val}эквивалентноlet o={};o[key]=val, этот синтаксис позволяет нам использовать переменные при установке ключей объектов.

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

value = {null}

Указывает, что он больше не является контролируемым компонентом

О выборе

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

Вышеупомянутое не рекомендуется, рекомендуется писать значение в select

<select value={this.state.value} onChange={this.handleChange}>
    <option value="grapefruit">Grapefruit</option>
    <option value="lime">Lime</option>
    <option value="coconut">Coconut</option>
    <option value="mango">Mango</option>
</select>

Большой выбор

<select multiple={true} value={['a', 'b']}>

О файле

input = файл не будет контролироваться реакцией

refs и неконтролируемые компоненты

В контролируемом компоненте мы можем получить элемент формы в компоненте, привязав функцию обработчика событий.

но, как<input type="file">Этот вид неконтролируемого компонента, если мы хотим перехватить его значение, как мы можем его перехватить?

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

Итак, мы можем привязать функцию обработчика событий только к форме, так как же нам получить элемент файла в форме?

Это требует использованияReact refохватывать

<input type="text" ref="username" />

// 处理函数中
let username = this.refs.username.value

Ref = строка, написанная выше, была оставлена

Теперь рекомендуется писать

<input type="text" ref={input=>this.username=input} /> //input就是渲染出的真实dom

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

Обновление: 16.3 新特のReact.createRef(),ref={input=>this.username=input}до сих пор доступен

списки и ключи

Помните, мы сказали,JSX tagМожет использоваться как возвращаемое значение функции

Итак, мы можем отобразить такой список

let array = [1,2,3,4,5];
let lists = array.map((item,index)=><li key={index}>{item}</li>);

ReactDOM.render((
  <ul>
    {lists}
  </ul>
), document.getElementById('root'));

Обратите внимание, что в верхнем каштане мы привязываем к каждому li ключ, который является индексной позицией в массиве и уникален.

ключ и перерисовать

Если мы не привяжем ключ к li, React выдаст предупреждение,

Warning: Each child in an array or iterator should have a unique "key" prop.

Но на самом деле он автоматически добавил ключ для нас.

Почему для реакции нужен ключ при рендеринге списка?

Помните, мы сказали выше, что реакция не перерисовывает весьReact ElementRedRaw все это.

Эм. . .那它是怎么做到的呢？就是利用这个key了，如果没有这个key，它是无法区别element中的tag谁是谁的。

ли и<ListItem>

Иногда содержимое в li слишком сложное, мы инкапсулируем его в компонент

В настоящее время мы рекомендуем монтировать ключ на компонент этого li, а не на li, возвращаемый компонентом.

Следующий пример дополняет документацию React.

unction NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Correct! Key should be specified inside the array.
<ListItem key={number.toString()}
          value={number} />

);

Значение ключа не может быть получено

Если мы передаем значение ключа компоненту, значение ключа не будет заключено вpropsобъект

Индексы не рекомендуются в качестве ключей

смотрите подробности in-depth explanation on the negative impacts of using an index as a key.

---

Ссылаться на:

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

--- ToBeContinue... ---