React - key, state, props, events

Август 24, 2022

Главная
Информатика
React - key, state, props, events

Содержание

2. Key
3. Usually you would render lists inside a component A key is a special string attribute which
4. Most often you would use IDs from your data as keys:
5. When you don’t have stable IDs for rendered items, you may use the item index as
6. Keys used within arrays should be unique among their siblings - they don’t need to be
7. React Online Marathon
8. State
9. A state is a special instance property and can be defined as an object contains data
10. State should never be updated directly, if we update the state of any component like the
11. React Online Marathon
12. Props
13. Props are basically kind of object. They used to pass data between components Whether you declare
14. or a function it must never modify its own props - props data is read-only
15. React Online Marathon
16. Events
17. Events аrе thе trіggеrеd rеасtіоns tо sресіfіс асtіоns lіkе mоusе hоvеr, mоusе сlісk, kеy prеss, еtc.
18. Handling events with React elements is very similar to handling events on DOM elements. React events
19. handler(e)
21. Скачать презентацию

Слайд 2

Key

Слайд 3

Usually you would render lists inside a component
A key is a

special string attribute which helps React to identify components uniquely

key=1

key=2

render()

render()

React elements

Слайд 4

Most often you would use IDs from your data as keys:

Слайд 5

When you don’t have stable IDs for rendered items, you may

use the item index as a key as a last resort:
But it is not recommended to use indexes for keys if the order of items may change

Слайд 6

Keys used within arrays should be unique among their siblings -

they don’t need to be globally unique

Слайд 7

React Online Marathon

Слайд 8

State

Слайд 9

A state is a special instance property and can be defined

as an object contains data specific to this component that may change over a lifetime of the component. The state is user-defined:

Слайд 10

State should never be updated directly, if we update the state

of any component like the following
the webpage will not re-render itself because React State will not be able to detect the changes made
setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state

Слайд 11

React Online Marathon

Слайд 12

Props

Слайд 13

Props are basically kind of object. They used to pass data

between components
Whether you declare a component as a class

Слайд 14

or a function
it must never modify its own props - props

data is read-only

Слайд 15

React Online Marathon

Слайд 16

Events

Слайд 17

Events аrе thе trіggеrеd rеасtіоns tо sресіfіс асtіоns lіkе mоusе hоvеr,

mоusе сlісk, kеy prеss, еtc.

Слайд 18

Handling events with React elements is very similar to handling events

on DOM elements.

React events are named using camelCase, instead of a lowercase

With JSX you pass a function as the event handler, rather than a string

Слайд 19

handler(e)