Первое знакомство с React: имитация публичного класса NetEase (react+antd)

внешний интерфейс React.js koa Redux

предисловие

Я начал изучать React недавно, поэтому я подражал общедоступному классу NetEase, чтобы укрепить свое понимание React, и я поделюсь с вами здесь. Проект кодирования React и некоторые ямы, на которые я наступил в эти дни

Используемый стек технологий

  • Запрос данных: аксиомы
  • Фоновая конструкция: коа
  • Междоменное решение: koa-cors
  • Прекомпилятор css: стилус
  • Фреймворк пользовательского интерфейса: и тд
  • Другие компоненты: перенастроить swiper, лучше прокрутить

Этапы загрузки проекта

  • git clone https://github.com/fsafafaf/react-wyclass.git
  • Установить
    # 安装依赖
    npm install
    # 启动后端
    yarn server
    # 启动前端
    yarn start

визуализация

Авторизоваться


Функция подписки

Функция поиска

Обзор


Реализация функции

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

вытоптанная яма

Один: реагировать-роутер-дом

① Маршрутизация коммутатора JS

В этом проекте я использовал react-redux для управления состоянием данных, но не подключался к базе данных, поэтому как только обновлялся интерфейс, состояние в хранилище очищалось. Это заставило меня использовать переход местоположения для сохранения данных в начале. После долгой борьбы я искал Baidu и, наконец, обнаружил, что могу использовать функцию перенаправления react-router-dom для реализации перехода на страницу.
实现代码

import { Redirect } from 'react-router-dom'

handleOnclick = () => {
    this.setState({ redirect: true })
}
render () {
    if(this.state.redirect){
            return <Redirect push to="/home" />;
    }
    return (<button onClcik={this.handleOnClick} type="button">Button</button>;)
}

② Перейти к входящим данным подмаршрута

При кодировании страницы воспроизведения я сначала использовал redux для управления данными, передаваемыми на страницу воспроизведения, но после обновления страницы идентификатор из redux исчез, и страница стала белой. эммм... Я немного подумал и вдруг обнаружил, что маршрут страницы не изменился, это все тот же маршрут, который заканчивается на ID! Тогда почему бы мне не использовать маршрутизацию для сопоставления данных, которые должен передавать интерфейс воспроизведения! Подумав об этом, я начну.Здесь я должен упомянуть, как я захожу на страницу воспроизведения в родительском компоненте: используйте this.props.match, чтобы получить маршрут текущей страницы, а затем добавьте идентификатор видео и используйте это как маршрут дочерней страницы

实现代码

import { Route } from 'react-router-dom'
class home extends Component {
    selectVideo(video, url) {
        return () => {
            this.props.history.push({
                pathname: url
            })
        }
    }
    return (
    
        <a onClick={this.selectVideo(item,`${match.url + '/' + item.id}`)}>
            <img src={item.img} />
            <div className="home-text">{item.text}</div>
        </a>
        
        <Route path = {`${match.url + '/:id'}`} component = {Play}/>
    )
}

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

实现代码

class Play extends Component {
    constructor(props) {
        super(props);
        const arr = this.props.history.location.pathname.split('/')
        const id = parseInt(arr[arr.length-1])
        this.state = {
            id: id
        }
    }
}

Второе: жизненный цикл реагирующих компонентов

В жизненном цикле реактивных компонентов есть 3 состояния.

  • Монтаж: вставлен настоящий DOM
  • Обновление: перерисовывается
  • Размонтирование: перемещено из реального DOM

Обычно для запроса данных мы используем метод componentDidMounting, но этот метод не всесилен, а иногда и ненадежен. При реализации страницы подписки я начал с запуска функции обнаружения учетной записи подписки в методе componentDidMounting, из-за чего страница подписки повторно отображала содержимое подписки только в том случае, если я подписался на учетную запись на других страницах, но непосредственно на подписке. Управляйте подпиской учетной записи, и страница подписки не будет перерисовываться. Короче говоря, метод componentDidMounting будет запускаться только при перезагрузке компонента, и нам нужно перерисовывать содержимое подписки каждый раз, когда изменяется this.props.В этом случае нам нужно использовать метод componentWillReceiveProps, он будет вызываться, когда компонент получает новый реквизит (после обновления), и этот метод не будет вызываться при инициализации рендера.

实现代码

    componentWillReceiveProps() {
        getData().then(res => {
            const names = this.props.videos
            const arr = []
            if (names.length === 0) {
                this.setState({show: false})
            } else {
                this.setState({show: true})
            }
            for (var key in names) {
                for (var index in res) {
                    if (res[index].up === names[key])
                        arr.push(res[index])
                }
            }
            this.setState({
                videos: arr,
            })
        })
    }

Три: реализация функции поиска

Поскольку автор этого проекта использует платформу Antd для создания первого опыта, я хочу использовать каждый компонент, который я вижу. Итак... когда я выполнял функцию поиска и увидел компонент AutoComplete... я просто... я использовал его. Оглядываясь назад, очень хочется вернуться назад и шлепнуть себя, но мне это совсем не нужно, зря потратил час. Если вы хотите посмотреть, как AutoComplete реализует функцию поиска, эммм... ну, вы тоже потратили 1 минуту, автор ее вообще не реализовал. Поговорим о том, как автор реализует функцию поиска.
Свойство onSearch компонента Search в antd автоматически вернет нам значение, поэтому нам не нужно вручную получать значение, введенное пользователем в поле ввода, поэтому Мы передаем значение функции onSearch(), определенной нами, а затем фильтруем имя курса, установленное allclass.Здесь, чтобы определить, существует ли значение значения в имени курса, мы можем использовать indexOf() >= 0, чтобы судить, если оно не существует, результат indexOf() равен -1.

实现代码

onSearch(value) {
        const result = this.state.allclass.filter(item => {
            if (item.Course.indexOf(value) >= 0)
                return item
        })
        console.log(result)
        this.setState({
            result: result
        })
    }

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

render () {
    const result = this.state.result.map(item => {
            return  (  
                <div key={item.id} >
                    <NavLink to={`/home/${item.id}`}>
                        <div className="search-bar">
                            <div className="search-text">{item.Course}</div>
                            <Icon type="right" style={{ color: '#9b9b9b' }} />
                        </div>
                    </NavLink>
                </div>
            )
        })
    return (
    <div className="class-search">
        <div className="search">
            <Search
                placeholder="9种"
                onSearch={value => this.onSearch(value)}
                style={{ width: 300 }}
                autoFocus
            />
            <div className="cancel-button" onClick={this.searchOut()}>取消</div>
        </div>

        <div className="content">
            {result}
        </div>
    </div>
    )
}

Эпилог

В этом реактивном проекте я научился кодировать во время обучения, и есть еще небольшие ошибки, которые не были решены. Например, мой интерфейс не будет автоматически отображаться при выходе из системы. Мне нужно снова переключить маршрут, и я могу отображать его на странице, когда я не вошел в систему, но я не могу научиться этому. Так ли это, продолжайте учиться, продолжайте наступать на яму, продолжайте прогрессировать! Я надеюсь, что эта моя статья поможет вам. Наконец прикрепите мойадрес проекта, если вы думаете, что это хорошо, вы можете дать мне звезду!

Категории