Личный блог React Build

предисловие

В процессе изучения реакции меня глубоко привлек режим функционального программирования реакции, все является компонентом, и все является JavaScript. Фреймворк React на самом деле имеет очень единственную функцию, в основном отвечающую за функцию рендеринга, но сообщество очень активно, и было создано много отличных библиотек и инструментов. Лично я считаю, что для хорошей работы над проектом часто требуется сотрудничество с другими библиотеками и инструментами, такими какreduxуправлять данными,react-routerУправление маршрутизацией и т.д., освоить основыwebpack配置а такжеes6语法, а затем хотите улучшить производительность, а также перехватывать функции с помощью реакции иimmutable.js, когда компонент не нуждается в повторном рендеринге,next.jsРендеринг на стороне сервера и многое другое... У меня всегда была идея реорганизовать свой блог, я просто взял отпуск и просто научился реагировать, поэтому у меня есть этот проект.

адрес проекта:GitHub.com/can-water/hot а…

Если вы считаете, что это хорошо, вы можете нажать «Звезда» в правом верхнем углу, чтобы поддержать его. Спасибо! ^_^

стек технологий

внешний интерфейс

• react
• react-redux
• react-thunk
• react-router
• axios
• eslint
• maked
• highlight.js
• antd
• es6/7/8

За кулисами

• spring boot

Этот проект принимает реализацию разделения внешнего и внутреннего интерфейса. Интерфейс внутреннего интерфейса разработан на основе спецификации RESTful и предоставляет только данные. Внешний интерфейс отвечает за маршрутизацию переходов, ограничения разрешений и рендеринг данных. PS: Так как я фронтендер, то в основном говорю здесь о фронтенде.

Реализованный функционал

• [x] администратор добавлять, удалять, проверять и изменять блог
• [x] Теги блога
• [x] уценка контента блога
• [x] Каталог отображения страницы содержимого блога
• [х] вернуться к началу
• [x] подсветка кода уценки
• [x] Регистрация входа пользователя
• [х] Комментарии пользователей
• [х] Отзывчивый

TODO

• [ ] Категория блога
• [ ] Нажмите на тег, чтобы найти похожие блоги
• [ ] Оптимизация боковой панели главной страницы
• [ ] Полный архив
• [ ] Развертывание запущено

Предварительный просмотр эффекта

титульная страница

Страница содержания

Логин пользователя

комментарий пользователя

Закулисное управление

Персональное резюме

рендеринг уценки

Я столкнулся с небольшой проблемой при рендеринге уценки во внешнем интерфейсе. Есть много связанных пакетов, но результаты анализа различных пакетов разные. Сообщество React рекомендуетreact-markdown, метод использования также очень прост

import ReactMarkdown from 'react-markdown'

const input = '# This is a header\n\nAnd this is a paragraph'
ReactDOM.render(
    <ReactMarkdown source={input} />,
    document.getElementById('container')
)

но нашелreact-markdownПоддержка таблиц не очень дружелюбна и наконец-то принятаmarked, в сочетании сhighlight.jsВыделите части кода

import marked from 'marked'
import hljs from 'highlight.js'
  componentWillMount() {
    marked.setOptions({
      highlight: code => hljs.highlightAuto(code).value
    })
  }

Последним проанализированным является строка, и ее нужно вставить вdom, из-за проблем с безопасностью,ReactПрямая вставка строк не рекомендуетсяdom, но у React есть API, который делает это:

<div className="article-detail" 
  dangerouslySetInnerHTML={{ __html: marked(output)) }} />

Реагировать на компонентизацию

Компоненты реакции состоят из представления и состояния dom, состояние — это центр обработки данных, а его состояние определяет состояние представления. React отвечает только за отрисовку пользовательского интерфейса.В отличие от других фреймворков, которые отслеживают данные для динамического изменения DOM, React использует setState для управления обновлениями представления. setState автоматически вызовет функцию рендеринга, чтобы вызвать повторную визуализацию представления.Если только данные состояния изменяются без вызова setState, обновление не будет запущено. Когда дело доходит до компонентов, вы должны понимать реагирующие компоненты.生命周期, официальная схема выглядит следующим образом:

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

• componentWillMount()
• componentDidMount()
• shouldComponentUpdate(nextProps, nextState) Эти хуки-функции об оптимизации производительности можно найти вshouldComponentUpdateВ статье, потому чтоshouldComponentUpdateвернуть по умолчаниюtrue, можно использовать простой метод, чтобы решить, нужно ли повторно отображать компонент, сравнив, одинакова ли структура данных до и после обновления.immutable.js.

связь между компонентами

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

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

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

Redux

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

store — это объект, который в основном состоит из трех методов:dispatchОн используется для распределения действий. Когда действие передается в диспетчеризацию, оно будет выполнено немедленно. Иногда мы не хотим, чтобы оно срабатывало немедленно.createStoreИспользуйте промежуточное ПО промежуточного слоя для преобразования диспетчеризации, например, redux-thunk, но это то, что делает react-radux.subscribeКак следует из названия, прослушиватель отслеживает изменения состояния.Эта функция регистрирует прослушиватель для отслеживания изменений состояния, когда хранилище вызывает диспетчеризацию.getStateЧтобы получить состояние в хранилище, когда мы используем действие для запуска редуктора для изменения состояния, нам нужно получить данные в новом состоянии. getState используется в двух случаях: во-первых, хранилище должно получить данные в состоянии после того, как действие отправлено через диспетчеризацию, а во-вторых, использовать подписку для отслеживания изменения состояния и вызова его для получения новых данных состояния.

Сказав это, хранить основной код очень коротко:

/**
 * 应用观察者模式
 * @param {Object} state
 * @param {Function} reducer
 */
function createStore(reducer) {
  let state = null
  const listeners = []
  const subscribe = listener => listeners.push(listener)
  const getState = () => state
  const dispatch = action => {
    // 覆盖原对象
    state = reducer(state, action)
    listeners.forEach(listener => listener())
  }
  // 初始化state
  dispatch({})
  return {
    getState,
    dispatch,
    subscribe
  }
}

другая часть,reducerЭто чистая функция. Она получает состояние и действие в качестве параметров и возвращает новое состояние в соответствии с типом действия. Если тип входящего действия не совпадает, она возвращает состояние по умолчанию. Простая реализация выглядит следующим образом:

function reducer(state, action) {
  if (!state) {
    return {
      title: {
        text: "water make redux",
        color: "red"
      },
      content: {
        text: "water make redux",
        color: "green"
      }
    }
  }
  switch (action.type) {
    case "UPDATE_TITLE_TEXT":
      return {
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case "UPDATE_TITLE_COLOR":
      return {
        ...state,
        title: {
          ...state.title,
          color: action.color
        }
      }
    default:
      return state
  }
}

Действие относительно простое, оно возвращает объект, требуется атрибут типа, а также могут быть переданы некоторые другие данные. Пример использования следующий:

/ 生成store
const store = createStore(reducer)
let oldState = store.getState()
// 监听数据变化重新渲页面
store.subscribe(() => {
  const newState = store.getState()
  renderApp(newState, oldState)
  oldState = newState
})
// 首次渲染页面
renderApp(store.getState())
store.dispatch({
  type: "UPDATE_TITLE_TEXT",
  text: "water is fighting"
})
store.dispatch({
  type: "UPDATE_TITLE_COLOR",
  color: "#f00"
})

React-redux

react-reduxОн инкапсулирует избыточность, может использоваться непосредственно в реакции и обеспечиваетProviderа такжеconnect.ProviderЭто компонент, который принимает хранилище в качестве реквизита, а затем передает его вниз через контекст, так что любой компонент в реакции может получить хранилище через контекст.connectЭто функция и компонент высшего порядка (HOC), который возвращает новый компонент путем передачи состояния и диспетчеризации.Это написано следующим образом:

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)

Также можно написать декоратор, который требует поддержки babel:

@connect(
	state,
	{ func }
)

Особого введения не так много, мини реализацию можно посмотреть на этом проекте: https://github.com/k-water/make-react-redux