Я хочу все React и Vue! React Hook реализует 11 основных функций Vue.

внешний интерфейс Vue.js React.js
Я хочу все React и Vue! React Hook реализует 11 основных функций Vue.

предисловие

Всем привет, это Линь Сансин, из-за нужд рабочего проекта, в последний месяц я начал использовать его в проекте.ReactИду в разработку, сегодня почти месяц, хочу поделиться с вами над чем я работаюReactкак добиться раньшеVueнекоторые из функций.

Поскольку этот новичок используетReactСкоро, если что-то не так, пожалуйста, дайте мне знать

Примечание. В этой статье упоминается версия Vue.Vue2, версия ReactReact17

image.png

1. JSX и шаблон

В Vue2 использоватьtemplateДа, студенты, использующие Vue, это знают, но в ReactJSX,JSX— это расширение синтаксиса JavaScript, очень похожее на XML.

Он имеет следующие преимущества:

  • JSX выполняется быстрее, потому что он оптимизируется после компиляции в код JavaScript.
  • Это типобезопасно, и ошибки перехватываются во время компиляции.
  • Писать шаблоны с помощью JSX проще и быстрее.

JSXПример: используйте функцию ReactDOM.render для рендеринга DOM в узел, соответствующий приложению id.

// 使用ReactDOM.render函数，将DOM渲染到对应到id为app的节点下
ReactDOM.render(
  <div>
      <h1>我是林三心</h1>
      <h2>我是菜鸟</h2>
      <p>React是一个很不错的 JavaScript 库!</p>
  </div>
  ,
  document.getElementById('app')
);

2. Установите стиль для элементов в React

React использует встроенные стили. мы можем использоватьГорбовой методСинтаксис для установки встроенных стилей. React автоматически добавит после указанного номера элементаpx. Следующий пример демонстрируетh1добавление элементаmyStyleВстроенные стили:

function Demo() {

  var myStyle = {
    fontSize: 100, // 驼峰法
    color: '#FF0000'
  }

  return <h1 style={myStyle}>林三心是菜鸟</h1>
}

3. Установите класс для элемента в React

Поскольку JSX — это JavaScript, некоторые идентификаторы, такие какclassНе рекомендуется в качестве имени атрибута XML. Вместо этого используйтеclassNameк соответствующим свойствам.

function Demo() {

  const classes = 'haha heihei xixi'

  return (
    <div>
      <h1 className='haha'>林三心是菜鸟</h1> // 单个
      <h1 className='haha heihei'>林三心是菜鸟</h1> // 多个
      <h1 className={classes}>林三心是菜鸟</h1> // 使用值来当做class
    </div>
  )
}

4. Щелкните события в React

существуетVueСобытие click в использует@clickсрабатывать, находясь вJSXиспользуется вonClick

function Demo() {
  const handleClick = () => {
    console.log('林三心是菜鸟')
  }

  return (
    <button onClick={handleClick}>点我</button>
  )
}

5. Изменение значений в React запускает обновления DOM

я используюReact hookодин из нихuseState, этот хук относительно прост при изменении констант, но при изменении ссылок对象или数组нужно сделать сначала浅拷贝Перезаписать модификацию

import { useState } from 'react'

function Demo() {
  const [msg, setMsg] = useState('我是菜鸟')
  const [obj, setObj] = useState({
    name: '林三心',
    food: '泡面'
  })
  const [arr, setArr] = useState([
    { message: '林三心啊', id: 1 },
    { message: '林三心啊啊', id: 2 },
    { message: '林三心啊啊啊', id: 3 }
  ])
  const handleClick = (type: number) => {
    switch (type) {
      case 1:
        setMsg('林三心是菜鸟') // 直接赋值
        break;
      case 2:
        setObj({ ...obj, food: '牛肉丸', }) // 浅拷贝
        break;
      case 3:
        setArr([...arr, { message: '林三心啊啊啊啊', id: 4}]) // 浅拷贝实现push效果
        break;
    }
  }

  return (
    <div>
      <button onClick={() => handleClick(1)}>修改msg</button>
      <button onClick={() => handleClick(2)}>修改obj的food</button>
      <button onClick={() => handleClick(3)}>arr添加一项</button>
      <h1>{msg}</h1>
      <p>{`我是${obj.name}我喜欢吃${obj.food}`}</p>
      <ul>
        {
          arr.map(({ message, id }) => {
            return <li key={id}>{message}</li>
          })
        }
      </ul >
    </div>
  )
}

6. Жизненный цикл

Использование хуков React -useEffect

import { useState, useEffect } from 'react'
function App() {
  const [num, setNum] = useState(1)
  const [count, setCount] = useState(1)
  useEffect(() => {
    console.log('哈哈哈哈')
  })
  return (
    <div>
      <button onClick={() => setNum(num + 1)}>点我修改num</button>
      <button onClick={() => setCount(count + 1)}>点我count</button>
    </div>
  )
}

Второй параметр не передается

 useEffect(() => {
    console.log('哈哈哈哈')
 })

когдаuseEffectКогда второй параметр не передается,页面初始а также数据更新, будет выполнена первая функция параметра, поэтому начальная страница будет выведена один раз哈哈哈哈, а затем, если вы нажмете кнопку, чтобы изменить число или изменить количество, он также выведет哈哈哈哈

Второй параметр передает пустой массив

 useEffect(() => {
    console.log('哈哈哈哈')
 }, [])

когдаuseEffectВторой параметр передается[], то функция первого параметра всего лишь页面初始Это будет выполнено только один раз, независимо от того, нажмете ли вы кнопку, чтобы изменить число или изменить количество, эта функция не будет выполнена.

Второй параметр передает непустой массив

 // ①
 useEffect(() => {
    console.log('哈哈哈哈')
 }, [num])
 
 // ②
 useEffect(() => {
    console.log('哈哈哈哈')
 }, [count])
 
 // ③
 useEffect(() => {
    console.log('哈哈哈哈')
 }, [num, count])

когдаuseEffectКогда второй параметр передает непустой массив,页面初始а также依赖的数据发生更新Когда выполняется первая функция параметра. Возьмем пример выше:

  • ①、Только нажмите кнопку изменить номер, он будет выведен снова哈哈哈哈
  • ②, только когда нажата кнопка для изменения счетчика, он будет выведен снова哈哈哈哈
  • ③, независимо от того, какая кнопка нажата, она снова выведется哈哈哈哈

вернуть четкую операцию

useEffect(() => {
    const timeId = setTimeout(() => console.log('我是定时器'), 1000)
    return () => clearTimeout(timeId)
 })

React очистится, когда компонент будет размонтирован. Эффект выполняется каждый раз, когда он визуализируется. React очистит предыдущий эффект перед выполнением текущего эффекта.

Это студенты, которые еще не понимают, вы можете лихорадочно нажать на кнопку и увидеть我是定时器Будет ли это предложение выведено несколько раз или только один раз, вдруг понял я.

7. Реализуйте v-if и v-else в React

v-if и v-else в Vue

v-ifДирективы используются для условного рендеринга части контента. Это содержимое будет отображаться только в том случае, если выражение директивы возвращает значение true.

<h1 v-if="show">林三心是菜鸟</h1>

также можно использоватьv-elseДобавьте блок else:

<h1 v-if="show">林三心是菜鸟</h1>
<h1 v-else>Oh no 😢</h1>

Реализовано в Реакт

Если вы просто хотите добитьсяv-if, вы можете использовать&&Логические операторы

import { useState } from 'react'
function Demo() {

  const [show, setShow] = useState(false)
  const changeShow = () => {
    setShow(!show)
  }

  return (
    <div>
      {show && <h1>林三心是菜鸟</h1>}
      <button onClick={changeShow}>点我</button>
    </div>
  )
}

Если вы хотите достичьv-ifа такжеv-else, вы можете использовать三元运算符

import { useState } from 'react'
function Demo() {

  const [show, setShow] = useState(false)
  const changeShow = () => {
    setShow(!show)
  }

  return (
    <div>
      {show ? <h1>林三心是菜鸟</h1> : <h1>菜鸟是林三心</h1>}
      <button onClick={changeShow}>点我</button>
    </div>
  )
}

8. Реализуйте v-show в React

v-шоу в Vue

Другим вариантом условного отображения элементов являетсяv-showинструкция. Использование примерно такое же:

<h1 v-show="show">林三心是菜鸟</h1>

Разница сv-showэлементы всегда визуализируются и остаются в DOM.v-showПросто переключите свойство CSS элементаdisplay.

Реализовано в Реакт

По сути, это замена элементаdisplayэтот стиль для достижения эффекта

function Demo() {

  // ...一样的代码
  
  return (
    <div>
      <h1 style={{display: show ? 'block': 'none'}}>林三心是菜鸟</h1>
      <button onClick={changeShow}>点我</button>
    </div>
  )
}

9. Реализуйте v-for в React

мы можем использоватьv-forДиректива отображает список на основе массива.v-forкоманда должна использоватьitem in itemsспециальный синтаксис формы, гдеitemsмассив исходных данных, аitemэто элемент массива, который повторяетсяпсевдоним.

v-для в Vue

<ul>
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

Реализовано в Реакт

JSX позволяет вставлять массивы в шаблоны, и массивы автоматически расширят все элементы:

function Demo() {

  const arr = [
    <li key={1}>林三心啊</li>,
    <li key={2}>林三心啊啊</li>,
    <li key={3}>林三心啊啊啊</li>,
  ]

  return (
    <ul>
      {arr}
    </ul >
  )
}

Но я в основном использую массивыmapметоды, помогающие в рендеринге

function Demo() {

  const arr = [
    { message: '林三心啊', id: 1 },
    { message: '林三心啊啊', id: 2 },
    { message: '林三心啊啊啊', id: 3 }
  ]

  return (
    <ul>
      {
        arr.map(({ message, id }) => {
          return <li key={id}>{message}</li>
        })
      }
    </ul >
  )
}

10. Реализовать вычисления в React

вычислено в Vue

если толькоnameилиfoodИзменять,magбудет обновлено до соответствующего значения

<h1>{{msg}}</h1>

computed: { msg() { return `我是${this.name}，我爱吃${this.food}` } }

Реализовано в Реакт

В React вам нужно пройтиuseMemoЭтот крючок для достиженияcomputedЭффект

import { useState, useMemo } from 'react'
function Demo() {
  const [name, setName] = useState('林三心')
  const [food, setFood] = useState('泡面')

  // 实现computed的功能
  const msg = useMemo(() => `我是${name}，我爱吃${food}`, [name, food]) // 监听name和food这两个变量

  const handleClick = (type: number) => {
    if (type === 1) {
      setName('大菜鸟')
    } else if (type === 2) {
      setFood('牛肉丸')
    }
  }

  return (
    <div>
      <button onClick={() => handleClick(1)}>修改name</button>
      <button onClick={() => handleClick(2)}>修改food</button>
      <h1>{msg}</h1>
    </div>
  )
}

11. Реализуйте часы в React

// useWatch.ts
import { useEffect, useRef } from 'react'

type Callback<T> = (prev?: T) => void
interface Config {
  immdiate: Boolean
}

const useWatch = <T>(data: T, callback: Callback<T>, config: Config = { immdiate: false }) => {
  const prev = useRef<T>()
  const { immdiate } = config
  const inited = useRef(false)
  const stop = useRef(false)
  useEffect(() => {
    const execute = () => callback(prev.current)
    if (!stop.current) {
      if (!inited.current) {
        inited.current = true
        immdiate && execute()
      } else {
        execute()
      }
      prev.current = data
    }
  }, [data])

  return () => stop.current = true
}

export default useWatch

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

import { useState } from 'react'
import useWatch from '/@/hooks/web/useWatch'
function App() {
  const [num, setNum] = useState(1)
  useWatch(num, (pre) => console.log(pre, num), { immdiate: true })
  return (
    <div>
      <div style={{ color: '#fff' }}>{num}</div>
      <button onClick={() => setNum(num + 1)}>点我</button>
    </div>
  )
}

Эпилог

image.png

Этот год подходит к концу, я надеюсь, что все здоровы и всего наилучшего

Я Линь Саньсинь, новичок-энтузиаст клиентского интерфейса. Если вы мотивированы, как фронтенд, и хотите изучить фронтенд, то мы можем подружиться и порыбачить вместе, ха-ха,Или у вас есть подходящая перспективная работа, вы можете позволить мне попробовать, тогда вы можете добавить мой wx -->meron857287645

Категории