React Chief -Speat (обновлен июнь 2021 г.)

Подписывайтесь на меня!: Следуйте @ericthecoder_

Вот почему я решил выполнить эту помощь памяти, и, учитывая, что моя память не такая хороша, я подумал, почему бы не сделать чудовищную помощь памяти со всеми понятиями, которые я знаю о React.

Так что я могу время от времени читать его и тем самым укреплять свои знания о реагировании.

Если у вас есть идеи или рекомендации, не стесняйтесь и делайте это в разделе комментариев.

Реагировать шпаргалку

Создать приложение React

// Create a new app
npx create-react-app my-app-name

// Run the created app
cd my-app-name
yarn start

// http://localhost:3000

Первый функциональный компонент реагирования

Нет необходимости импортировать реагирование из «React» (так как реагирование 17)
Должен иметь первую букву проникновения
Должен вернуть JSX

(src/app.js)

// React component
function App(){
  return Hello World
} 

export default App;

Как этот компонент получает рендеринг в браузер? Основным файлом проекта является src/index.js, и в этом файле есть инструкция по рендерированию компонента

ReactDOM.render(, document.getElementById('root'))

Компонент приложения будет затем отображаться внутри Public/index.html ‘root’ div

Импорт компонент

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

function Greeting(){
    return Hello World
}
export default Greeting

Этот компонент может быть импорт

import Greeting from './Gretting'

function App(){
    return 
}

или экспорт имени …

export function Greeting(){
    return Hello World
}

Этот компонент может быть импорт

import {Greeting} from './Gretting'

Конвенция о именовании Бем

return (

  Welcome to my application: {appTitle}
  
    Product name: {product.name}
Nick name: {product.nickName}
    Product description: {product.description}
  

)

Правила JSX

Вернуть один элемент (только один родительский элемент)

// not valid
return Hello world
Hi!

// valid with fragment. 
return (
    <>
        Hello World
        Hi!
    
)
// Noted the parenthesis for multi-line formatting

Используйте классное имя вместо класса Также все имя атрибута должно быть Camelcase

// not valid
return (
    
        Hello World
    
)

// valid
return (
    
    
)

Закрывать каждый элемент

return (
    
    
)

Вложенные компоненты

// Arrow function shorthand component
const Person = () => Mike Taylor

// Arrow function component
const Message = () => {
    return Hello
}

// Function component
function HelloWorld(){
  return (
      <>
          
          
      
  )
}

Компонент CSS

(src/app.css)

h1 {
    color: red;
}

(src/app.js) Импортировать файл CSS

import './App.css'

function App(){
  return Hello World
}

Встроенные CSS

function App(){
  return Hello World
}

JavaScript в JSX

Приложить между {}
Должно быть выражение (вернуть значение)

function App(){
    const name = 'Mike'
    return (
      <>
          Hello {name}
          {name === 'Mike' ? '(admin)': '(user)'}
      
    )
}

Свойства компонентов (реквизит)

function App()
    return 
} 

const Person = (props) => {
    return Name: {props.name}, Age: {props.age}
}

// or props object deconstructing
const Person = ({name, age}) => {
    return Name: {name} Age: {age}
}

Детские реквизиты (слот)

function App()
    return (
        
            Hi, this is a welcome message
        
    )
} 

const Person = (props) => {
    return (
        Name: {props.name}, Age: {props.age}
        {props.children}
    )
}

// or props object deconstructing
const Person = ({name, age, children}) => {
    return (
        Name: {name} Age: {age}
        {children}
    )
}

Значение реквизита по умолчанию

const Person = ({name, age, children}) => {
    return (
        Name: {name} Age: {age}
        {children}
    )
}

Person.defaultProps = {
    name: 'No name',
    age: 0,
}

Список

const people = [
  {id: 1, name: 'Mike', age: 29},
  {id: 2, name: 'Peter', age: 24},
  {id: 3, name: 'John', age: 39},
]
function App(){
    return (
        people.map(person => {
            return 
        })
    )
} 

const Person = (props) => {
  return (
      Name: {props.name}, Age: {props.age}
  )
}

Список с ключом (для внутренней ссылки React)

function App(){
    return (
        people.map(person => {
            return 
        })
     )
}

Реквизит объект разрушительный

function App(){
  return people.map(person => )
}

const Person = ({name, age}) => {
  return (
      Name: {name}, Age: {age}
  )
}

Нажмите на событие

const clickHandler = () => alert('Hello World')
function App(){
    return (
        <>
            Welcome to my app
            
         
    )
}

или встроенный …

function App(){
    return (
        <>
            Welcome to my app
            
        
     )
}

Для передачи аргументов нам нужно использовать функцию стрелки

const clickHandler = (message) => alert(message)
function App(){
    return (
        <>
            Welcome to my app
            
         
    )
}

E для споров о событиях

const clickHandler = (e) => console.log(e.target)
function App(){
    return (
        <>
            Welcome to my app
            
         
    )
}

Передайте мероприятие от ребенка к родителю

function Todo({item, onDelete}) {
    return (
      
        {item}
        
    )
}

function Todos() {
  const handleDelete = (todo) => {
    const newTodos = todos.filter(item => item !== todo)
    setTodos(() => newTodos)
  }

  return (
    {todos.map(todo => (
       
    }
  )
}

Usestate Hook

Цель Usestate – обработка реактивных данных. Любые данные, которые изменяются в приложении, называются состоянием. И когда состояние изменится, вы хотите отреагировать, чтобы обновить пользовательский интерфейс.

Крюк всегда начинается с префикса «Использовать»
Должен быть вызван только в компоненте/функции React
Должен быть вызов на верхнем уровне функционального компонента
Объявление не может быть вызвано условным
USESTATE вернуть массив 2: [значение состояния, установка состояния функции]

import React, {useState} from 'react';

const DisplayTitle = () => {
  const [title, setTitle] = useState('This is the Title')
  const handleClick = () => setTitle('New Title')
  return <>
    {title}
    
  
};

export default DisplayTitle;

USESTATE с объектом

const DisplayTitle = () => {
  const [person, setPerson] = useState({name: 'Mike', age: 29})
  const handleClick = () => setPerson({...person, age: 35})
  return <>
    {title}
    
  
};

Функциональная форма SETSTATE

function Counter() {
  const [count, setCount] = useState(0)
  // Use a function to set State
  const increase = () => setCount(() => count + 1)
  return (
    <>
      Counter
      {count}
      
      
    
  )
}

Использовать

В React вы можете захотеть выполнить код после событий жизненного цикла или побочных эффектов.

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

import React, { useEffect } from 'react';

function IncreaseValue() {
    const [value, setValue] = useState(0)
    useEffect(() => {
        document.title = `New value: ${value}` 
    })
    return 
}

Условное использование

Условное необходимо размещать внутри функции использования

useEffect(() => {
    if (value > 0) {
        document.title = `New value: ${value}` 
    }
})

Использовать список зависимостей

Что если вы хотите выполнить код только на первом рендере или только при изменении конкретного состояния? Вы можете использовать функцию использования и отправить массив зависимостей в качестве параметра.

Использование будет работать только в том случае, если состояние находится в списке зависимостей. Если список пуст [] Использование EFFEECT будет работать только при начальном рендере.

useEffect(() => {
    document.title = `New value: ${value}` 
}, [])
// Noted the empty array. useEffect will then only run once on initial render

useEffect(() => {
    document.title = `New value: ${value}` 
}, [value])
// Will run each time 'value' state change.

Используйте функцию очистки

Что делать, если вы хотите выполнять код каждый раз, когда компонент не подходит?

Чтобы выполнить код только в том случае, если компонент UNMOUNT/DUSTING вам необходимо добавить оператор «return» в вашу функцию использования.

useEffect(() =>  { 
    const timer = window.setInterval(() => { 
        setCount(count => count + 1)
    }, 1000)
    return () => clearInterval(timer)
}, [])

Код «clearInterval (таймер)» будет выполнен только до того, как компонент будет удален из пользовательского интерфейса (Unmount)

Условное рендеринг

function DisplayGreeting() {
    const [name, setName] = useState('Mike')
    if (name === 'Mike') {
        return Hello admin {name} 
    }
    return Hello user {name} 
}

Встроенный if-else

  return (
    
      The user is {isLoggedIn ? 'currently' : 'not'} logged in.
    
  );
}

Встроенный логический && оператор. Отображение только в том случае, если первое выражение является правдой: 0, “, нулевой, неопределенной и NAN

  function DisplayUserInfo({active}) {
    return (
      
        { active && User is active}
      
    );
}

Многократный встроенный Если

 0 && 'text-green-500' || count < 0 && 'text-red-500'}>{count}

Форма

const UserForm = () => {
  const [userName, setUserName] = useState('')
  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(userName)
  }
return (
<>
    
       setUserName(e.target.value)} 
          type="text" id="userName" 
          name="userName"
      />
       
    

)
};

export default UserForm;

USEREF

USEREF в основном используется для нацеливания на элемент DOM. Но это также может быть использовано для сохранения/сохранения изменчивого значения между каждым рендерингом. USEREF не вызывает повторного рендеринга (например, USESTATE).

const UseRefBasics = () => {
  const refContainer = useRef(null)
  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(refContainer.current.value)
  }

  useEffect(() => {
    refContainer.current.focus()
  }, [])

  return (
    
      
        
          
          
        
      
    
  )
};

Вывод

Вот и все на сегодня. У нас еще много дел, так что увидимся завтра … Если вы хотите не упустить ничего не пропустить, нажмите, следуй за мной!

Подписывайтесь на меня!: Следуйте @ericthecoder_

Оригинал: “https://dev.to/ericchapman/react-cheat-sheet-updated-may-2021-1mcd”

Реагировать шпаргалку

Создать приложение React

Первый функциональный компонент реагирования

Hello World

Импорт компонент

Hello World } export default Greeting

Hello World }

Welcome to my application: {appTitle}

Product name: {product.name}

Nick name: {product.nickName}

Правила JSX

Hello world

Hi!

Hello World

Hi!

Вложенные компоненты

Mike Taylor

Hello

Компонент CSS

Hello World

Встроенные CSS

Hello World

JavaScript в JSX

Hello {name}

Свойства компонентов (реквизит)

Name: {props.name}, Age: {props.age}

Name: {name} Age: {age}

Детские реквизиты (слот)

Name: {props.name}, Age: {props.age}

Name: {name} Age: {age}

Значение реквизита по умолчанию

Name: {name} Age: {age}

Список

Name: {props.name}, Age: {props.age}

Список с ключом (для внутренней ссылки React)

Реквизит объект разрушительный

Name: {name}, Age: {age}

Нажмите на событие

Welcome to my app

Welcome to my app

Welcome to my app

Welcome to my app

Usestate Hook

{title}

USESTATE с объектом

{title}

Функциональная форма SETSTATE

Counter

Использовать

Условное использование

Использовать список зависимостей

Используйте функцию очистки

Условное рендеринг

Hello admin {name}

Hello user {name}

User is active

Форма

USEREF

Вывод

Читайте ещё по теме: