Лично лучший совет, который я могу дать, - это избегать написания логики, которая часто обновляет ваше состояние компонента. Вы не хотите, чтобы ваш компонент постоянно вызывал this.setState({}), поскольку он создает искаженную задержку, которая может повлиять на ваше приложение как визуально, так и на производительность.
Определенно не пишите такие вещи, как:
componentDidUpdate(){
this.setStatE({
field: this.props.newData
})
}
Но, хотя и по этой теме, используйте методы жизненного цикла, в частности componentDidMount() и componentDidUpdate(), которые невероятно полезны для управления логикой внутри вашего компонента. В некотором смысле они также могут улучшить ваш компонент, предоставив ему своего рода механизм дыхания для обработки данных.
Наконец, это более-менее предпочтительный вариант, но если вы хотите иметь хорошую читабельность кода, я бы предложил создать функцию для генерации разметки, а не писать ее непосредственно в методе рендеринга.
Учитывая следующий код:
import React from "react"
class Example extends React.Component{
state = {
tests: [{id: 1, name: "test1"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}]
}
render(){
const tests = this.state.tests
return(
<div>
{ tests.length > 0 && tests.map((test) => {
return <div>{test.name}</div>
})}
</div>
)
}
}
Этот код прекрасно работает, как есть, но вы можете упростить чтение для кого-то другого, просто сделав другую функцию для разметки.
Исправленный вариант:
import React from "react"
class Example extends React.Component{
state = {
tests: [{id: 1, name: "test1"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}]
}
createTests = () => {
const tests = this.state.tests
if(tests.length > 0){
return tests.map((test) => {
return <div>{test.name}</div>
})
}
}
render(){
const tests = this.state.tests
return(
<div>
{this.createTests()}
</div>
)
}
}
Делает то же самое, но теперь очень ясно, что мы пытаемся достичь в нашем методе рендеринга.