Vue, чтобы реагировать (см. компоненты React в первый день)

"Это 12-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления"

Я стараюсь сделать каждый шаг практичным и надеюсь следовать написанному и практиковаться.

проект работает

Сначала установите строительные леса и создайте новый проект, используя строительные леса.

#安装脚手架
npm i create-react-app -g
#创建项目
create-react-app react-demo

Используйте vscode, чтобы открыть проект, весь каталог проекта следующим образом:

react-demo
├── README.md
├── node_modules
├── package.json
├── public
├── src
└── yarn.lock

Вход на весь проект естьsrc/index.js, функция, реализованная этим файлом: callReactDOM.renderметод визуализации представления.

Давайте сначала посмотрим на метод ReactDOM.render, сигнатура функции выглядит следующим образом:

ReactDOM.render(element,container[,callback])

Эффект от этого метода заключается вРеагировать элемент(элемент) отображается в предоставленном контейнере (элемент dom) и возвращает ссылку на компонент, вы можете нажать на официальную документацию, чтобы увидеть API

Официальная документация рендеринга()

см. далееРеагировать элементчто это такое?

Согласно официальному сайту, элемент React на самом деле является результатом выражения JSX (результат выражения 1+2 равен 3, и результат можно понимать как возвращаемое значение).

Что такое JSX

JSX — это расширение синтаксиса JS, которое позволяет писать HTML-подобные структуры в JS. Например:

const element = <h1>Hello, world!</h1>;

надelementКонстанта — это элемент React

Исправлятьindex.jsСодержимое файла следующее

const element=<h1>hello,world</h1>
ReactDOM.render(
  element,
  document.getElementById('root')
);

Обновите страницу, и вы обнаружите, что страница браузера отобразит содержимое элемента. Видно, что приложение и элемент — это одно и то же. Здесь приложение называется компонентом.

Прежде чем изучать компоненты, ознакомьтесь с синтаксисом JSX.

Выражения разрешены в JSX, и выражения заключены в {}

const name="Jack"
const Welcom=<h1>Hi,{name}</h1>
//表达式可以是变量、函数调用、数字表达式(a+b)等
const getTime=()=>{}
const Clock=<h1><span>现在是:</span> <b>getTime()</b></h1>

//与Html的区别 
//html中的class在JSX中是className
const blog=<section className="blog"></section>

//绑定style
const btnStyle={padding:'5px 20px'}
const myBtn=<button style={btnStyle}></button>
//或者直接写到一起
const myBtn1=<button style={{padding:'5px 20px'}}></button>

//绑定事件
const clickHandle=()=>{}
const myBtn2=<button onClick={(e)=>{clickHandle(e)}}></button>

Объясните основное использование синтаксиса JSX, давайте посмотрим на компоненты в React.

Компоненты в React

В React есть два типа компонентов, один из них — функциональный компонент, аналогичный приведенному выше приложению. Один из них — классовый компонент.

До появления React Hooks функциональные компоненты не могли иметь собственного внутреннего состояния, они могли только передавать пропсы через родительский компонент и затем отображать содержимое — это тоже метод программирования, рекомендованный React. Измените код App.js следующим образом и испытайте метод написания функциональных компонентов:

// 函数式组件 父组件传递的props作为函数参数传入
function Logo({src}){//接收props
    return  <img src={src} className="App-logo" alt="logo" />
}

//调用Logo组件
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Logo src={logo}></Logo> //传递props
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

Другим компонентом является компонент класса, который необходимо сначала наследовать, если он используется.React.Component, изучение компонентов класса может соответствовать компонентам vue, а то, чего может достичь vue, может быть достигнуто в реакции

Если мы хотим реализовать компонент, отображающий текущее время, цвет, отображаемый компонентом, контролируется родительским компонентом.

ВУЭ2 реализован следующим образом:

<template>
    <section :style="{ color: color }">当前时间：{{ curTime }}</section>
</template>

<script>
export default {
    name: 'clock',
    props: {
        color: {
            type: String,
            default: '#333',
        },
    },
    data() {
        return {
            curTime: 0,
            timer: 0,
        }
    },
    mounted() {
        this.timer = setInterval(() => {
            console.log('hahah')
            this.curTime = new Date()
        }, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
}
</script>

Реализация реакции выглядит следующим образом: Вы можете скопировать код в App.js и запустить его, чтобы увидеть эффект.

//组件定义
class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {//相当于vue中的data
            curTime: 0,
            timer: 0
        }
    }
    componentDidMount() {//相当于vue声明周期的mounted
        const timer = setInterval(() => {
            this.setState({ curTime: new Date().toString() })
        }, 1000)
        this.setState({ timer: timer })
    }
    componentWillUnmount() {//相当于vue生命周期的beforeDestroy
        clearInterval(this.state.timer)
    }
    render() {
        return (
            <section style={{ color: this.props.color }}>
                当前时间：{this.state.curTime}
            </section>
        )
    }
}
//组件调用
<Clock color="#fff"></Clock>

Пример — компонент запроса списка Сравните разницу между компонентами vue2 и react

Давайте возьмем сложный пример и ознакомимся с использованием компонента класса реакции в сравнении

Пример написания списка запросов

Общий бизнес-процесс таков:

1. Компонент QueryList получает данные, передает реквизиты в список, а список просматривает данные для отображения представления.
2. При запросе отправьте searchKey в QueryList, QueryList получит данные, отфильтрует в соответствии с searchKey и передаст реквизиты в представление рендеринга List.

Всего содержит три компонента

• QueryList
• List
• Query

Сначала реализуйте компонент List

vue реализация

<template>
    <section>
        <section v-if="list.length == 0">暂无数据</section>
        <div style="margin-top: 10px" v-for="item in list" :key="item.name">
            ID：{{ item.id }} 姓名：{{ item.name }} 年龄：{{ item.age }}
        </div>
    </section>
</template>

<script>
export default {
    name: 'List',
    props: {
        list: {
            type: Array,
            default: () => [],
        },
    },
    computed: {
        noData() {
            return this.list.length == 0
        },
    },
}
</script>

<style lang="less" scoped></style>

Реализовано с помощью реакции

import React from 'react'
class List extends React.Component{
    constructor(props){
        super(props)
        console.log()
    }
    get noData(){//computed 
        return this.props.list.length===0
    }
    getList(){
        return this.props.list.map(item=>{
            return <div key={item.name}> ID：{ item.id } 姓名：{ item.name } 年龄：{ item.age }</div>
        })
    }
    
    render(){
        const list=this.getList()
        const dom=this.noData?<div>暂无数据</div>:<div>{list}</div>
        return <div>{dom} </div>
    }
}
export default List

При сравнении можно увидеть следующие отличия:

• Реквизиты в vue должны быть объявлены перед использованием и могут использоваться непосредственно в реакции.

• Рендеринг списка Vue заключается в использовании инструкции v-for, а реакция заключается в использовании метода карты массива JS для возврата JSX для рендеринга.

• В vue есть вычисляемые свойства, а в react нет, но их можно реализовать через геттеры, например get noData(){}

• В vue есть v-if, а в react нет, но его можно реализовать другими способами, например тернарными выражениямиconst dom=this.noData?<div>暂无数据</div>:<div>{list}</div>другой примерcanRender && <MyComponent/>

Реализация компонента Query: реализация vue

<template>
    <section>
        <input
            placeholder="输入id"
            style="padding: 12px; font-size: 40px"
            v-model="id"
            @input="handleChange"
        />
    </section>
</template>

<script>
export default {
    name: 'Query',
    data() {
        return {
            id: '',
        }
    },
    methods: {
        handleChange() {
            //向父组件发送数据
            this.$emit('on-change', this.id)
        },
    },
}
</script>

<style lang="less" scoped></style>

Реагировать на реализацию

import React from 'react'
class Query extends React.Component{
    constructor(props){
        super(props)
    }
    testThis(){
        console.log(this)
    }
    onChange=(e)=>{//防止this丢失
        // 向父组件发送消息
        this.props.onQuery(e.target.value)
    }
    render(){
        return <input style={{padding:'10px',fontSize:'20px'}} placeholder="输入id" onChange={this.onChange}  />
    }
}

export default Query

Разница заключается в следующем:

• Vue отправляет сообщение родительскому компоненту, используя this.$emit(), react — это метод прямого вызова родительского компонента, то естьthis.props.callback

• Событие привязки элемента в vue использует имя события @, а событие привязки элемента в реакции использует имя события on.Кроме того, следует отметить, что событие привязки элемента в реакции должно обращать внимание на потерю этого, обратите обратите внимание на определение метода onChange выше

Компонент QueryList

vue реализация

<template>
    <section>
        <!-- 查询列表组件  查询框    列表 -->
        <query @on-change="handleChange"></query>
        <list :list="list"></list>
    </section>
</template>

<script>
import query from './query'
import list from './list'
import axios from 'axios'

export default {
    name: 'query-list',
    components: {
        query,
        list,
    },
    data() {
        return {
            list: [],
        }
    },
    methods: {
        async getList(id = -1) {
            const res = await axios.request({
                method: 'get',
                url: '<http://111.229.14.189/gk-api/util/list>',
                params: {
                    id: id,
                },
            })
            this.list = res.data
        },
        handleChange(id) {
            this.getList(id)
        },
    },
    created() {
        this.getList()
    },
}
</script>

Реагировать на реализацию

import React from 'react';
import Query from './Query.js'
import List from './List.js'
import axios from 'axios'

class QueryList extends React.Component{
  constructor(props){
      super(props)
      this.state={ 
        list:[]
      }
  }
  componentDidMount(){
    this.getList()
  }
  async getList(id=-1){
    const res=await axios.request({
      method:'get',
      url:'<http://111.229.14.189/gk-api/util/list>',
      params:{
        id:id
      }
    })
    this.setState({list:res.data})
  }
  handleQuery=(value)=>{
   this.getList(value)
  }
  render(){
    return (
      <div className="query-list" >
        <Query onQuery={this.handleQuery}></Query>
        <List list={this.state.list}></List>
      </div>
    );  
  }

}

export default QueryList;

Разница заключается в следующем:

• В vue интерфейс вызывается при создании или монтировании, а реакция вызывает интерфейс в componentDidMount.

• Собственное состояние компонента в vue определяется в данных, а изменяется непосредственно this.list=xxx; собственное состояние компонента в реакции определяется в this.state. Если вы изменяете его, вам нужно использовать this.setState({list: ххх})

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

кодовый адрес

• вью-код
• код реакции