Что я узнал из своего недавнего интервью

1) Будьте в курсе последних обновлений в своей отрасли, иначе вы потеряетесь

2) Следите за руководителями вашей отрасли

Когда дело доходит до технологий, нет более важной работы, чем быть в курсе новейших способов кодирования вашего специального языка. Я хорошо знаю React.js, и я также очень хорошо знаю Redux, однако эти две конкретные библиотеки быстро меняются, и технические компании так же быстро приспосабливаются к изменениям. React был создан в 2011 году, и с тех пор один и тот же язык React выглядит совершенно по-другому, почти неузнаваемо.

Два основных обновления:

Приостановка:

React.Suspense означает, что мы можем приостановить рендеринг наших компонентов до тех пор, пока не будет выполнено какое-либо условие (например, данные из конечной точки или ресурса будут загружены), и до тех пор пока не будет отображаться запасной вариант (например, счетчик).

import {
  dontRenderMeUntilThisIsReady,
  Suspense as TryRenderTheseChildren
} from "fictitious-react";
import getMyDependency from "fictitious-dependency-fetcher";
function ComponentThatDependsOnSomething(props) {
  const dependency = dontRenderMeUntilThisIsReady(
    getMyDependency(props.dependencyId)
  );
  return <h1>{dependency.data}</h1>;
}
function App(props) {
  return (
    <TryRenderTheseChildren andIfTheyAreNotReadyRenderThis={<ImTheFallback />}>
      <ComponentThatDependsOnSomething dependencyId={1} />
      <ComponentThatDependsOnSomething dependencyId={2} />
    </TryRenderTheseChildren>
  );
}

Крючки:

Хуки позволяют использовать состояние и другие функции React без написания класса.

Код без хуков:

import React, { Component } from "react";
export default class Button extends Component {
  state = { buttonText: "Click me, please" };
  handleClick = () => {
    this.setState(() => {
      return { buttonText: "Thanks, been clicked!" };
    });
  };
  render() {
    const { buttonText } = this.state;
    return <button onClick ={this.handleClick}>{buttonText}</button>;
  }
}

Код с хуками:

import React, { useState } from "react";
export default function Button() {
  const [buttonText, setButtonText] = useState("Click me, please");
  function handleClick() {
    return setButtonText("Thanks, been clicked!");
  }
  return <button onClick={handleClick}>{buttonText}</button>;
}

Получение данных без хуков:

import React, { Component } from "react";
export default class DataLoader extends Component {
  state = { data: [] };
  componentDidMount() {
    fetch("http://localhost:3001/links/")
      .then(response => response.json())
      .then(data =>
        this.setState(() => {
          return { data };
        })
      );
  }
  render() {
    return this.props.render(this.state.data);
  }
}

Получение данных с помощью хуков:

import React, { useState, useEffect } from "react";
export default function DataLoader() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch("http://localhost:3001/links/")
      .then(response => response.json())
      .then(data => setData(data));
  });
  return (
    <div><ul>
        {data.map(el => (
          <li key={el.id}>{el.title}</li>
        ))}
      </ul></div>
  );
}

Подкасты и Twitter идеально подходят для того, чтобы быть в курсе обновлений. Есть несколько ключевых людей, за которыми я слежу, таких как Шон Суикс и Дэн Абрамов, а также подкаст React.

Что я узнал из своего недавнего интервью

Вопросы по теме