Цель этого проекта - получить данные, хранящиеся в файле db.json в корневом каталоге нашего проекта.
Содержимое db.json может быть любым, но в моем случае я специально выбрал код, используемый в fullstack конечно uni_of_helsinki. содержимое db.json показано ниже.
{
"anecdotes":[
{
"content": "If it hurts, do it more often",
"id": "47145",
"votes": 0
},
{
"content": "Adding manpower to a late software project makes it later!",
"id": "21149",
"votes": 0
},
{
"content": "The first 90 percent of the code accounts for the first 90 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.",
"id": "69581",
"votes": 0
},
{
"content": "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",
"id": "36975",
"votes": 0
},
{
"content": "Premature optimization is the root of all evil.",
"id": "25170",
"votes": 0
},
{
"content": "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.",
"id": "98312",
"votes": 0
}
]
}
Полный код функционального компонента приведен ниже. Я постараюсь объяснить каждый блок сравнения кода и то, что каждый блок кода делает как в функциональном, так и в классовом компоненте.
import React, { useEffect, useState } from 'react'
import axios from 'axios'
const App = () => {
//Here we are using destructuring and setting properties using different hooks
const [anecdotes, setAnecdotes] = useState([])
const [current, setCurrent] = useState(0)
useEffect(() =>{
axios.get('http://localhost:3001/anecdotes').then(response => {
setAnecdotes(response.data)
})
},[])
const handleClick = () => {
setCurrent(Math.round(Math.random() * (anecdotes.length - 1)))
}
if (anecdotes.length === 0) {
return <div>no anecdotes...</div>
}
return (
<div>
<h1>anecdote of the day</h1>
<div>{anecdotes[current].content}</div>
<button onClick={handleClick}>next</button>
</div>
)
}
export default App
Эту же операцию можно выполнить с помощью компонента класса, как показано ниже:
import React from 'react'
import axios from 'axios'
class App extends React.Component {
constructor(props) {
super(props)
//Here we are setting state as an object and using its property on later stage to do different operations
this.state = {
anecdotes: [],
current: 0
}
}
componentDidMount = () => {
axios.get('http: //localhost:3001/anecdotes').then(response => {
this.setState({ anecdotes: response.data })
})
}
handleClick = () => {
const current = Math.floor(
Math.random() * this.state.anecdotes.length
)
this.setState({ current })
}
render() {
if(this.state.anecdotes.length === 0) {
return <div>no anecdotes...</div>
}
return (
<div>
<h1>anecdote of the day</h1>
<div>
{this.state.anecdotes[this.state.current].content}
</div>
<button onClick={this.handleClick}>next</button>
</div>
)
}
}
export default App;
После импорта библиотек в обоих случаях мы будем использовать хуки (useEffect, useState).
«UseEffect используется для извлечения данных из файла db.json, сохраненного в корне проекта. используя аксиомы. В компоненте класса такая же операция выполняется с помощью метода жизненного цикла componentDidMount »
здесь операция загрузки функционального компонента
useEffect(() =>{
axios.get(‘http://localhost:3001/anecdotes').then(response => {
setAnecdotes(response.data)
})
},[])
Внутри useEffect мы сначала извлекаем данные, затем сохраняем данные, используя состояние setAnecdote, которое инициализируется пустым массивом с помощью хука useState. Внутри хука useEffect есть второй аргумент [] после функции обратного вызова. Это называется списком зависимостей, и, как следует из названия, мы можем поместить что угодно внутри, например, id или message. наш эффект Precisley useEffect будет зависеть от состояния элементов внутри массива зависимостей, я имею в виду, что он будет запускать эффект снова для каждого изменения элемента внутри списка зависимостей.
Та же операция выполняется внутри компонента класса, сначала устанавливая объект с помощью this.state внутри метода constructor. конструктор - это метод, который автоматически вызывается для создания объекта с использованием класса.
componentDidMount = () => {
axios.get(‘http: //localhost:3001/anecdotes’).then(response => {
this.setState({ anecdotes: response.data })
})
}
Здесь следует отметить, что для свойства ancdotes установлено значение response.data, которое получено после операции выборки с использованием this.setState. ancdotes здесь уже не пустой объект.
Внутри объекта this.state мы установим два свойства: анекдоты, инициализированные пустым объектом, и текущее значение 0.
Аналитически анекдоты в функциональном компоненте задаются с использованием useState перехватывает пустой объект.
Основное различие между функциональным компонентом и компонентом класса заключается в том, что в функциональном состоянии может состоять из нескольких разных переменных, причем все они имеют свою собственную функцию обновления, здесь в нашем случае anecodtes действует как переменная, а s etAnecdotes действует как функция обновления. В то время как компонент состояния компонента класса является одним объектом и изменяется с помощью метода setState, именно this.setState.
Я не использую ссылку на документацию для каждого термина, определенного здесь, чтобы избежать затруднения читателей, хотя в последнем я приложу ссылку на официальный документ.
Затем определяется функция handleClick.
Компонент внутри класса:
handleClick = () => {
const current = Math.floor(
Math.random() * this.state.anecdotes.length
)
this.setState({ current })
}
Сначала мы будем читать код справа налево внутри объекта this.state, он считывает длину анекдотов, которая установлена на пустую, а затем умножается на random, а затем на Math.floor, чтобы вернуть целочисленное значение, которое сохраняется в текущем.
И его состояние устанавливается с помощью this.setState для каждого щелчка.
в то время как в функциональном компоненте выполняется такая же операция, как показано ниже:
const handleClick = () => {
setCurrent(Math.round(Math.random() * (anecdotes.length — 1)))
}
setCurrent используется для обновления состояния при каждом щелчке.
Следующим шагом будет отображение в DOM. Сначала мы проверим, равна ли длина анекдотов нулю, затем мы отобразим «без анекдотов…», иначе мы отобразим содержание анекдотов.
Основное отличие класса и функционального компонента здесь заключается в том, что проверка длины выполняется внутри метода render (), а затем отображается внутри оператора return, как показано ниже:
render() {
if(this.state.anecdotes.length === 0) {
return <div>no anecdotes…</div>
}
return (
<div>
<h1>anecdote of the day</h1>
<div>
{this.state.anecdotes[this.state.current].content}
</div>
<button onClick={this.handleClick}>next</button>
</div>
)
}
в то время как, как мы знаем, в компоненте класса нет метода рендеринга, поэтому он проверяется в теле приложения функции, а результат отображается внутри оператора return, как показано ниже:
if (anecdotes.length === 0) {
return <div>no anecdotes…</div>
}
return (
<div>
<h1>anecdote of the day</h1>
<div>{anecdotes[current].content}</div>
<button onClick={handleClick}>next</button>
</div>
)
К любому объекту можно получить доступ из файла db.json, используя эту строку, как показано ниже
`{this.state.anecdotes [this.state.current] .content}
в то время как та же цель в функциональном компоненте достигается с помощью этой строки внутри тега div, как показано ниже:
`{анекдоты [текущий] .content}
в то время как кнопка имеет обработчик onClick, который относится к функции, определенной выше.
Файл db.json можно получить с помощью npm i json-server
Затем выполните json-server - смотрите db.json - порт 3001
снимок экрана для компонента класса ниже:
снимок экрана для функционального компонента выглядит следующим образом:
Это все функциональные компоненты, которые легко понять, и сообщество движется к этому. Пожалуйста, не упустите возможность оставить свой ценный комментарий.
исходный код здесь:
Форк здесь: Github repo
Использованная литература:
