Pure React - 2

[netcat-na-diary]

PropTypes

import PropTypes from 'prop-types';
function Comment({ author, message, likes }) {
return (
  <div>
    <div className='author'>{author}</div>
    <div className='message'>{message}</div>
    <div className='likes'>
      {likes > 0 ? likes : 'No'} likes
    </div>
  </div>
  );
}
Comment.propTypes = {
  message: PropTypes.string.isRequired,
  author: PropTypes.string.isRequired,
  likes: PropTypes.number
}

Валидаторы

PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string

Дополнительно

PropTypes.node
PropTypes.element

There are validators for node and element. A node is anything that can be rendered, meaning numbers, strings, elements, or an array of those. An element is a React element created with JSX or by
calling React.createElement.

PropTypes.instanceOf(SpecificClass)
PropTypes.oneOf(['person', 'place', 1234])
PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.boolean
])

PropTypes.arrayOf(PropTypes.string)
    – Would match: ['a', 'b', 'c']
    – Would not match: ['a', 'b', 42]
PropTypes.objectOf(PropTypes.number)
    – Would match: {age: 27, birthMonth: 9}
    – Would not match: {age: 27, name: 'Joe'}

PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
})

keys - ключи
!!! keys should be stable, permanent, and unique for each element in the array
- stable - у элемента всегда одинаковый key независимо от его позиции в массиве
- permanent - ключ не меняется между рендерами
- unique - не может быть двух элементов с одинаковым ключом

setState
2 способа обойти асинхронность setState
1. callback function

this.setState({name: 'Joe'}, function() {
    // called after state has been updated
    // and the component has been re-rendered
    // this.state now contains { name: 'Joe' }
});

2. Functional setState

this.setState((state, props) => {
    return {
        value: state.value + 1
    }
});

Что хранить в стейтах
As a general rule, data that is stored in state should be referenced inside render somewhere. Component state is for storing UI state – things that affect the visual rendering of the page. This makes sense
because any time state is updated, the component will re-render.
If modifying a piece of data does not visually change the component, that data shouldn’t go into state.
Here are some things that make sense to put in state:
• User-entered input (values of text boxes and other form fields)
• Current or selected item (the current tab, the selected row)
• Data from the server (a list of products, the number of “likes” on a page)
• Open/closed state (modal open/closed, sidebar expanded/hidden)