Начало работы с React (учебные заметки)

Введение в реакцию

Во-первых, нельзя отрицать, что React.js — самый популярный в мире фронтенд-фреймворк (фронтенд-фреймворк, запущенный Facebook), который используют большинство интернет-компаний первого и второго эшелона в Китае. для разработки, таких как Ali, Meituan, Baidu, Qunar, NetEase, Zhizhi Почти такие интернет-компании первого эшелона используют React в качестве основного переднего стека технологий.

Сообщество React также очень сильное, и благодаря популярности React появилось больше полезных фреймворков, таких как ReactNative и React VR. React продвигается с 2013 года, и теперь он выпустил версию 16RC (React Fiber), которая значительно улучшила его производительность и удобство использования.

Резюме преимуществ реакции

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

Необходимые предварительные знания

• Основы JavaScript: Было бы лучше, если бы вы знали ES6

• основы нпм: вы должны иметь возможность использовать управление пакетами npm.

---

Сборка среды разработки React

• Чтобы установить Node, вам нужно всего лишь зайти на веб-сайт Node, загрузить ответную версию, а затем дважды щелкнуть, чтобы установить ее.

// 安装完成打开命令窗口输入
node -v   //出现版本号则安装成功

• Монтаж строительных лесов

// 安装react的脚手架工具
//create-react-app是React官方出的脚手架工具
npm install -g create-react-app  

• Создайте проект React

// 桌面创建一个react-demo的文件夹
// 进入当前文件夹,打开命令行
create-react-app demo   //用脚手架创建React项目
npm start   // 安装完成进入demo文件夹启动项目

---

Знакомство с файлами в корневом каталоге проекта

• README.md: Основная функция этого файла - описание проекта, некоторые вещи прописаны по умолчанию, можно просто глянуть. Если вы находитесь на работе, вы можете удалить содержимое файла и написать файл самостоятельно.Вы можете использовать синтаксис Markdown для записи этого файла.

• package.json: Этот файл является файлом конфигурации веб-пакета и файлом управления пакетами проекта. Здесь настраиваются сторонние пакеты (версии пакетов) и некоторые общие конфигурации команд, от которых зависит проект. Конечно, скаффолдинг уже настроен для нас. текущее местоположение, мы Никаких изменений не требуется. Если вы знаете webpack, вы должны быть знакомы с этим.

• package-lock.json: Этот файл одно предложение, чтобы объяснить, состоит в том, чтобы заблокировать номер версии установки и необходимо загрузить в Git, чтобы убедиться, что другие люди снова включали, когда вы устанавливаете зависимости, чтобы обеспечить консистенцию.

• gitignore: это файл конфигурации для выборочной загрузки git.Например, папку node_modules, которая будет введена через некоторое время, необходимо настроить так, чтобы она не загружалась.

• node_modules: Эта папка является пакетом зависимостей нашего проекта.В текущем местоположении для нас скачан скаффолдинг, отдельно ничего устанавливать не нужно.

• public: общедоступные файлы, содержащие общие шаблоны и значки.

• src: Основной файл для написания кода, файлы в этой папке являются наиболее важными для нас и нуждаются в освоении нами.

Введение в общие папки

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

• favicon.ico: это значок веб-сайта или проекта, обычно отображаемый в верхнем левом углу вкладки браузера.

• index.html: файл шаблона для домашней страницы

• mainifest.json: Мобильный файл конфигурации

введение в папку src

Этот каталог содержит наш открытый исходный код, каталог, с которым мы обычно работаем чаще всего.

• index.js: Это входной файл проекта

• index.css: это файл CSS в index.js.

• app.js: этот файл эквивалентен модулю метода, а также представляет собой простое модульное программирование.

• serviceWorker.js: это для написания разработки мобильного терминала. PWA должен использовать этот файл. С этим файлом это эквивалентно функции автономного просмотра.

---

Введение в компоненты

Запись файла входа

При написании проекта, как правило, он пишется из входного файла.В каталоге src файл index.js является входным файлом.

import React from 'react' // 引入react
import ReactDOM from 'react-dom' // 引入react-dom
import App from './App' // 引入App模块
ReactDOM.render(<App />,document.getElementById('root')) // 将App模块渲染到了 root ID上面

Написание компонентов приложения

import React from 'react'
// JSX语法
class App extends React.Component{
    render(){
        return (
            <div>
                我是APP组件
            </div>
        )
    }
}
export default App;

Введение в синтаксис JSX в React

JSX就是Javascript和XML结合的一种格式。React发明了JSX，
可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，
遇到{就当JavaScript解析.

Разница между компонентами и обычным синтаксисом JSX

Это всего лишь простое предложение, то есть ваши пользовательские компоненты должны быть написаны с заглавной буквы, а JSX начинается со строчных букв.

Использование тернарного оператора в JSX

синтаксис js также можно использовать в JSX

import React from 'react'
// JSX语法
class App extends React.Component{
    render(){
        return (
            <div>
                <div>{false ? '不显示我' : '显示的我'}</div>
                我是APP组件
            </div>
        )
    }
}
export default App;

---

Принцип внешней упаковки компонентов

Принципы шаблонов компонентов react и vue одинаковы: на самом внешнем слое должен быть только один элемент, если элементов больше, будет сообщено об ошибке.

Следующий пример является ошибкой, так как в самом внешнем слое есть два элемента.

import React from 'react'
// JSX语法
class App extends React.Component{
    render(){
        return (
            <div></div>
            <div>
                <div>{false ? '不显示我' : '显示的我'}</div>
                我是APP组件
            </div>
        )
    }
}
export default App;

Метка фрагмента

С самым внешним DIV компонент совершенно нормальный, но что делать, если ваш макет не нуждается в этой самой внешней метке?Например, когда мы делаем макет Flex, внешний слой действительно не может иметь элементы-обертки. На самом деле, React16 уже учел это противоречие и подготовил для нас ярлыки.

import React from 'react'
// JSX语法
class App extends React.Component{
    render(){
        return (
            <React.Fragment>
                <div>{false ? '不显示我' : '显示的我'}</div>
            </React.Fragment>
        )
    }
}
export default App;

В это время перейдите к элементам браузера, чтобы проверить, и вы обнаружите, что внешнего пакета нет.

---

Адаптивный дизайн и привязка данных

React не рекомендует манипулировать DOM-элементами напрямую, а гонять их через данные для изменения эффектов в интерфейсе. React автоматически поможет вам внести изменения в интерфейс на основе изменений данных. Поэтому при написании кода React вам не нужно сосредотачиваться на операциях, связанных с DOM, вам нужно сосредоточиться только на операциях с данными (это также основная причина, по которой React так популярен, что значительно ускоряет нашу разработку).

import React from 'react'
// JSX语法
class App extends React.Component{
    constructor(props){
    super(props) //调用父类的构造函数，固定写法
        this.state={
            myName: '只会番茄炒蛋',
            list: ['番茄', '炒蛋']
        }
    }
    render(){
        return (
            <React.Fragment>
                <div>{this.state.myName}</div>
                <ul>
                    {
                        this.state.list.map((item,index) => {
                            return (
                                <li key={item + index}>{item}</li>
                            )
                        })
                    }
                </ul>
            </React.Fragment>
        )
    }
}
export default App;

привязать событие

import React from 'react'
// JSX语法
class App extends React.Component{
    constructor(props){
    super(props) //调用父类的构造函数，固定写法
        this.state={
            myName: '只会番茄炒蛋',
            list: ['番茄', '炒蛋']
        }
        this.changeBtn = this.changeBtn.bind(this)
    }
    render(){
        return (
            <React.Fragment>
                <div>{this.state.myName}</div>
                <button onClick={this.changeBtn}>点击事件</button>
            </React.Fragment>
        )
    }
    changeBtn () {
        // 这里要注意,如果没有绑定this这里的this是undefined
        // 通过setState方法去改变数据,保证页面会渲染改变后的内容
        this.setState({
            myName: '我的点击按钮后被改变的值'
        })
    }
}
export default App;

---

Несколько мест для JSX, чтобы не наступить на яму

Комментарии к коду JSX

Пишите комментарии к коду двумя способами

 {/* 正确注释的写法 */}
 { // 正确注释的写法 }

ловушка класса в JSX

Это сделано для предотвращения конфликта имени класса с классом в js, поэтому className используется в JSX.

<input class="input"/>  // 错误的写法
<input className="input"/>  // 正确的写法

проблема с разбором html в JSX

Если вы хотите ввести тег h1 в текстовое поле и отобразить его. Значение по умолчанию не вступит в силу, оно будет печатать только тег h1 на странице, чего я не хочу. Если на работе есть такая необходимость, для ее решения можно использовать свойствоhazardlySetInnerHTML. Конкретный код выглядит следующим образом:

<li dangerouslySetInnerHTML={{__html:item}}> {<h1>我会变成h1号字体</h1>}</li>

Яма тегов в JSX

Яма метки в JSX — это тоже относительно большая ямка, метка — вспомогательная метка в html, и тоже очень полезная метка.

<div>
    <label>加入服务：</label>
    <input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
</div>

В настоящее время, если вы хотите нажать «Присоединиться к сервису», вы можете напрямую активировать текстовое поле для удобного ввода. По изначальной задумке html достаточно добавить ID напрямую. код показывает, как показано ниже:

<div>
    <label for="jspang">加入服务：</label>
    <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
</div>

В настоящее время, хотя ваш эффект просмотра нормальный, в консоли все еще отображается красное предупреждение. Вероятно, это означает, что вы не можете использовать for.Его легко спутать с циклом for в javascript, и вам будет предложено использовать htmlfor.

<div>
    <label htmlFor="jspang">加入服务：</label>
    <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
</div>

---

Разделение компонентов

Как родительские компоненты используют дочерние компоненты

// 子组件
import React from 'react'
// JSX语法
class childItem extends React.Component{
    return (
        <React.Fragment>
            <div>我是子组件</div>
        </React.Fragment>
    )
}
export default childItem;

// 父组件
import React from 'react'
// 引入子组件
import childItem from './childItem'
// JSX语法
class parentItem extends React.Component{
    return (
        <React.Fragment>
            {/* 使用了子组件 */}
            <childItem/>
        </React.Fragment>
    )
}
export default parentItem;

передача компонента родитель-потомок по значению

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

// 父组件
import React from 'react'
// 引入子组件
import childItem from './childItem'
// JSX语法
class parentItem extends React.Component{
    constractor (props) {
        super(props)
        this.state = {
            myName: '只会番茄炒蛋'
        }
    }
    return (
        <React.Fragment>
            {/* 使用了子组件 */}
            <childItem myName={this.state.myName}/>
        </React.Fragment>
    )
}
export default parentItem;

Дочерний компонент принимает возвращаемое значение от родительского компонента через this.props.XXX.

// 子组件
import React from 'react'
// JSX语法
class childItem extends React.Component{
    return (
        <React.Fragment>
            <div>{this.props.myName}</div>
        </React.Fragment>
    )
}
export default childItem;

Родительские компоненты передают содержимое дочерним компонентам в виде атрибутов.

Дочерний компонент передает данные родительскому компоненту

Помните единый поток данных!!!

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

// 子组件
import React from 'react'
// JSX语法
class childItem extends React.Component{
    constructor (props) {
        super(props)
        this.changeParent = this.changeParent.bind(this)
    }
    return (
        <React.Fragment>
            <div onClick={this.changeParent}>{this.props.myName}</div>
        </React.Fragment>
    )
    changeParent () {
        // 调用父组件传递过来的方法
        this.props.pranentChange()
    }
}
export default childItem;

// 父组件
import React from 'react'
// 引入子组件
import childItem from './childItem'
// JSX语法
class parentItem extends React.Component{
    constractor (props) {
        super(props)
        this.state = {
            myName: '只会番茄炒蛋'
        }
        this.pranentChange = this.pranentChange.bind(this)
    }
    return (
        <React.Fragment>
            {/* 使用了子组件 */}
            <childItem 
                pranentChange={this.pranentChange}
                myName={this.state.myName}
            />
        </React.Fragment>
    )
    pranentChange () {
        this.setState({
            myName: '番茄炒蛋少放糖'
        })
    }
}
export default parentItem;

---

PropTypes проверяет переданное значение

Когда родительский компонент передает данные дочернему компоненту, используется метод свойств, то есть props, но ограничений нет. На работе это категорически запрещено, потому что если не проверять большие проекты, то потом это станет крайне хаотичным, и бизнес-логика не может быть гарантирована.

Применение PropTypes

общий тест

// 子组件
import React from 'react'
// 引入效验
import PropTypes from 'prop-types'
// JSX语法
class childItem extends React.Component{
    constructor (props) {
        super(props)
        this.changeParent = this.changeParent.bind(this)
    }
    return (
        <React.Fragment>
            <div onClick={this.changeParent}>{this.props.myName}</div>
        </React.Fragment>
    )
    changeParent () {
        // 调用父组件传递过来的方法
        this.props.pranentChange()
    }
}
childItem.prorTypes = {
    myName: PropTypes.string, // 效验传入的内容必须是一个字符串
    pranentChange: PropTypes.func // 效验传入的内容必须是一个function
}
export default childItem;

Примечание. После добавления проверки здесь появится предупреждение, если контент не будет передан в соответствии с правилами проверки.

Проверка требуемых значений --- isRequired

Например, здесь добавляется атрибут newName и размещается в JSX, даже если родительский компонент не передаст это значение, об ошибке не будет сообщено

// 子组件
render() { 
    return ( 
        <div >{this.props.newName}</div>
    );
}

Но как избежать необходимости передавать значение атрибута newName?Если он не будет передан, будет сообщено об ошибке, что требует использования ключевого слова isRequired, что означает, что оно должно быть передано, и будет сообщено об ошибке, если оно не проходит.

childItem.prorTypes = {
    // 效验传入的内容必须是一个字符串并且必须传入值
    newName:PropTypes.string.isRequired, 
}

Использовать значения по умолчанию --- defaultProps

Иногда дочерние компоненты должны иметь значение по умолчанию.Если родительский компонент не передает его, используется значение по умолчанию.Если он передается, используется значение, переданное родительским компонентом.defalutProps может реализовать функцию значения по умолчанию. Например, теперь используется значение по умолчанию для newName — «только томатная яичница».

childItem.defaultProps = {
    // 子组件使用父组件传递的值,但是他自己有个默认的值
    newName:'只会番茄炒蛋'
}

---

Как использовать реф.

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

import React from 'react'
// JSX语法
class parentItem extends React.Component{
    constractor (props) {
        super(props)
        this.state = {
            myName: '只会番茄炒蛋'
        }
        this.inputChange = this.inputChange.bind(this)
    }
    return (
        <React.Fragment>
            <input 
                value={this.state.myName}
                onChange={this.inputChange}
            ></input>
        </React.Fragment>
    )
    inputChange (e) {
        console.log(e.target.value)
    }
}
export default parentItem;

Если вы хотите получить значение ввода выше, вы должны передать e.target.value, что не интуитивно понятно и выглядит не очень хорошо.Эта ситуация может быть решена с помощью ref

import React from 'react'
// JSX语法
class parentItem extends React.Component{
    constractor (props) {
        super(props)
        this.state = {
            myName: '只会番茄炒蛋'
        }
        this.inputChange = this.inputChange.bind(this)
    }
    return (
        <React.Fragment>
            <input 
                value={this.state.myName}
                onChange={this.inputChange}
                ref={input => {this.input = input}}
            ></input>
        </React.Fragment>
    )
    inputChange (e) {
        console.log(this.input.value)
    }
}
export default parentItem;

Это делает код намного более семантичным и элегантным. Однако не рекомендуется использовать ref для работы таким образом, потому что React управляется данными, поэтому с ref будут различные проблемы.

Яма в использовании ссылки

Например, теперь мы хотим использовать привязку ref для получения количества дочерних элементов, мы можем использовать ref для первой привязки.

<ul ref={(ul)=>{this.ul=ul}}>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>  

В это время, если мы динамически добавим или уменьшим количество li и напечатаем количество li в методе, мы обнаружим, что возвращаемое число не является точным.Эта яма вызвана тем, что обновление setState в React является асинхронным функция. То есть у этого setState есть время выполнения кода.Если вы действительно хотите четко разобраться, вам нужно иметь представление о том, что такое виртуальный DOM. Проще говоря, поскольку он асинхронный, наш console.log уже был выполнен до того, как виртуальный Дом будет отрендерен.

Как написать этот код, чтобы он был полностью нормальным?На самом деле метод setState предоставляет callback-функцию, которая является его второй функцией. Напишите следующее, чтобы получить метод, который мы хотим.

增加/删除(){
    this.setState({
        list:改变后的数据,
    },()=>{
        console.log(this.ul.querySelectorAll('li').length)
    })
}

---

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

Что такое функция жизненного цикла

生命周期函数指在某一个时刻组件会自动调用执行的函数

устанавливать

Когда экземпляр компонента создается и вставляется в DOM, его жизненный цикл запускается в следующем порядке:

• constructor()

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
在 React 组件挂载之前，会调用它的构造函数。在为 React.Component 子类实现构造函数时，
应在其他语句之前前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。

通常，在 React 中，构造函数仅用于以下两种情况：
* 通过给 this.state 赋值对象来初始化内部 state。
* 为事件处理函数绑定实例

在 constructor() 函数中不要调用 setState() 方法。
如果你的组件需要使用内部 state，请直接在构造函数中为 this.state 赋值初始 state：

• static getDerivedStateFromProps()

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

• render()

页面state或props发生变化时执行。

• componentDidMount()

组件挂载完成时被执行。一般也在这里发起网路请求

возобновить

Когда реквизиты или изменения состояния заправляют обновление. Обновление компонентов Обновление жизненного цикла Вызовы в следующем порядке:

• static getDerivedStateFromProps()

// 不常用的生命周期方法
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

• shouldComponentUpdate()

// 不常用的生命周期方法
根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。

• render()

render() 方法是 class 组件中唯一必须实现的方法。
当 render 被调用时，它会检查 this.props 和 this.state 的变化

• getSnapshotBeforeUpdate()

// 不常用的生命周期方法
getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

• componentDidUpdate()

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。

удалить

При удалении компонента из DOM вызываются следующие методы:

• componentWillUnmount()

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，
例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

обработка ошибок

Следующие методы вызываются при возникновении ошибки в процессе рендеринга, в жизненном цикле или в конструкторе дочернего компонента:

• static getDerivedStateFromError()

// 不常用的生命周期方法
此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state

• componentDidCatch()

// 不常用的生命周期方法
componentDidCatch() 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况：

запрос данных axios в React

установить аксиомы

npm install  axios -S

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

// 那个组件使用在那个页面引入
import axios from 'axios'

После ознакомления можно запросить ajax в функции жизненного цикла componentDidMount.Также рекомендую выполнять его в функции componentDidMount, потому что выполнение его в рендере вызовет много проблем, таких как непрерывный рендеринг, выполнение в componentWillMount, при использовании RN, будет конфликт. Поэтому настоятельно рекомендуется делать ajax-запрос в функции componentDidMount.

componentDidMount(){
    axios.post('https://www.easy-mock.com/mock/5d50245e710c4d0d04d78d19/echart')
        .then((res)=>{console.log('axios 获取数据成功:'+JSON.stringify(res))  })
        .catch((error)=>{console.log('axios 获取数据失败'+error)})
}

Анимировать группу реакции-перехода

У React отличная экология разработки.Все основные потребности для разработки можно найти в официальных или сделанных Богом колесах.Конечно, анимация не является исключением.В экосистеме React есть много сторонних анимационных компонентов.Узнайте react-transition-group анимационная составляющая. Он может удовлетворить ежедневные потребности в разработке анимации. Самая важная причина для рекомендации: это также библиотека анимационных переходов, официально предоставляемая React, с полным документом API).

Установить реакционно-переходную группу

npm install react-transition-group -S

После установки вы можете зайти на github и посмотреть документацию, там есть три основные библиотеки (или компоненты).

• Transition
• CSSTransition
• TransitionGroup

Использование CSSTransition

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

import { CSSTransition } from 'react-transition-group'

После введения его можно использовать. Используемый метод такой же, как и с использованием пользовательских компонентов. Он написан напрямую, и больше не нужно управлять className. Эта часть управляется CSSTransition.

render() { 
    return ( 
        <div>
            <CSSTransition 
                in={this.state.isShow}   //用于判断是否出现的状态
                timeout={2000}           //动画持续时间
                classNames="boss-text"   //className值，防止重复
            >
                <div>BOSS级人物-孙悟空</div>
            </CSSTransition>
            <div><button onClick={this.toToggole}>召唤Boss</button></div>
        </div>
        );
}

Следует отметить, что атрибут classNames состоит из s. Если вы забудете его написать, он будет перепутан с исходным ClassName, поэтому вы должны обратить на это внимание.

• xxx-enter: стиль CSS перед вводом (запись);
• xxx-enter-active: стили CSS перед входом в анимацию до завершения;
• xxx-enter-done: стиль CSS при вводе готово;
• xxx-exit: стиль CSS перед выходом (exit);
• xxx-exit-active: стиль CSS перед анимацией выхода знает, когда она заканчивается.
• xxx-exit-done: стили CSS при завершении выхода.

.input {border:3px solid #ae7000}

.boss-text-enter{
    opacity: 0;
}
.boss-text-enter-active{
    opacity: 1;
    transition: opacity 2000ms;

}
.boss-text-enter-done{
    opacity: 1;
}
.boss-text-exit{
    opacity: 1;
}
.boss-text-exit-active{
    opacity: 0;
    transition: opacity 2000ms;

}
.boss-text-exit-done{
    opacity: 0;
}

свойство unmountOnExit

CSSTransition плюс свойство unmountOnExit, плюс это означает, что при выходе элемента DOM автоматически удаляется, что раньше было невозможно при CSS-анимации.

render() { 
    return ( 
        <div>
            <CSSTransition 
                in={this.state.isShow}   //用于判断是否出现的状态
                timeout={2000}           //动画持续时间
                classNames="boss-text"   //className值，防止重复
                unmountOnExit
            >
                <div>BOSS级人物-孙悟空</div>
            </CSSTransition>
            <div><button onClick={this.toToggole}>召唤Boss</button></div>
        </div>
        );
}

Использование TransitionGroup

Он отвечает за анимацию нескольких DOM-элементов.В качестве примера возьмем Miss Sister.Теперь вы можете добавлять любые сервисные элементы,но все они появляются сразу без какой-либо анимации.Добавьте к нему анимацию сейчас. Чтобы добавить анимацию, сначала введите transitionGrop.

import {CSSTransition , TransitionGroup} from 'react-transition-group'

После введения этот компонент можно использовать, добавляя метки к внешнему слою.

<ul ref={(ul)=>{this.ul=ul}}>
    <TransitionGroup>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </TransitionGroup>
</ul> 

Но этого недостаточно, вам еще нужно добавить его, чтобы определить анимацию.

<ul ref={(ul)=>{this.ul=ul}}>
    <TransitionGroup>
        <CSSTransition
            timeout={1000}
            classNames='boss-text'
            unmountOnExit
            appear={true}
            key={index+item}
        >
            <li>1</li>
        </CSSTransition>
        <CSSTransition
            timeout={1000}
            classNames='boss-text'
            unmountOnExit
            appear={true}
            key={index+item}
        >
            <li>2</li>
        </CSSTransition>
    </TransitionGroup>
</ul> 

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

---

Большая часть вышеприведенного содержания и объяснений взята изтехнический жирБлог, который сочетает в себе мое собственное понимание реакции.