Skip to content
Branch: master
Clone or download
Latest commit 86de5f3 Apr 7, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
source Add root prefix of urls Apr 7, 2019
.babelrc Implement Apr 7, 2019
.eslintignore Implement Apr 7, 2019
.eslintrc.json Implement Apr 7, 2019
.gitignore Implement Apr 7, 2019
.postcssrc Implement Apr 7, 2019
README.md Fix readme Apr 7, 2019
package-lock.json Update dependencies Apr 7, 2019
package.json Update dependencies Apr 7, 2019
tsconfig.json Implement Apr 7, 2019

README.md

TZ #1, v.2.0

О себе

Меня зовут Евгений и я разработчик =) Два года работаю со стеком React/Redux/React-router. На текущем месте работы мы не используем Typescript, по этому меня заинтересовало принять участие в данном проекте. Кроме того ранее так же не использовал react-hooks, так как в текущие проекты нет смысла переписывать, а в для новых проектов нет уверенности в необходимости этих нововведений.

Про приложение

  • выполнен базовый функционал
  • использованы react-hooks
  • использован typescript
  • оформление
  • docker
  • demo (http://epodivilov.github.io/TZ-1/)

Вопросы

Буду рад конструктивной критике по поводу использования typescript и react-hooks. Основные вопросы по typescript:

  • Как правильно организовывать хранение типов?
  • Если мы храним типы рядом с реализацией, нормально ли в дальнейшем иметь перекрёстные импорты типов, при том что сами реализации не импортируются.
  • Использование вместе с Redux всегда боль? Или я не правильно готовлю?

Основные вопросы по react-hooks:

  • Зачем? Когда это:
  const Component = ({ onClick }) => {
  const [value, setValue] = useState('');

  const handleChange = useCallback(e => setValue(e.target.value), [value])
  const handleSubmit = useCallback(e => onClick({ value }), [value]);

  return (
    <div>
      Message
      <input type="text" value={value} onChange={handleChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

стало лучше чем это:

class Component extends React.Component {
  state = { value: '' }

  handleChange = e => this.setState({
    value: e.target.value
  })

  handleSubmit = () => {
    const { value } = this.state
    const { onClick } = this.props;

    onClick({ value })
  }

  render() {
    const { value } = this.state

    return (
      <div>
        Message
        <input type="text" value={value} onChange={this.handleChange} />
        <button onClick={this.handleSubmit}>Submit</button>
      </div>
    );
  }
}

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

  • Есть ли реальные плюсы от использования react-hooks? Вынос повторяющейся логики можно сделать и с классами. Интересуют реальные примеры использования в крупных приложениях.
You can’t perform that action at this time.