Я новичок в ReactJs и стараюсь следовать лучшим практикам. Из моего исследования я наткнулся на пару противоречащих друг другу статей, в которых обсуждается, какой должна быть реализация.
Должно ли состояние полагаться на свойства, передаваемые от родительского компонента? В приведенных ниже сравнениях они оба следуют SRP, но не уверены, какой из них лучше. Хотелось бы вашего совета, спасибо!
1. -- Рекомендации для состояния компонента в React.js
Во-первых, и, наверное, самое главное, состояние компонента не должно зависеть от передаваемых свойств. (см. ниже, например, что мы не должны делать)
class UserWidget extends React.Component {
// ...
// BAD: set this.state.fullName with values received through props
constructor (props) {
this.state = {
fullName: `${props.firstName} ${props.lastName}`
};
}
// ...
}
2. -- 7 архитектурных атрибутов надежного React компонент
Давайте рефакторинг возьмем на себя одну обязанность: визуализировать поля формы и прикрепить обработчики событий. Он не должен знать, как использовать хранилище напрямую..... Компонент получает сохраненное входное значение из prop initialValue и сохраняет входное значение, используя функцию prop saveValue(newValue). Эти реквизиты предоставляются withPersistence() HOC с использованием техники прокси реквизитов.
class PersistentForm extends Component {
constructor(props) {
super(props);
this.state = { inputValue: props.initialValue };
}
// ...
}
3. -- В моем случае у меня есть что-то вроде следующего (интересно, является ли это приемлемой реализацией?) -- Должно ли состояние обрабатываться в задачах или в другом компоненте типа TasksWithPersistence, который находится между TasksWithData и Tasks?
export default function TasksWithData(TasksComponent) {
return class withData extends React.Component {
render() {
const tasks = TaskAPI.getTasks();
return (
<TasksComponent
tasks={tasks}
{...this.props}
/>
)
}
}
}
export default class Tasks extends React.Component {
state = {
tasks: [],
addItemInput: null
};
// ...
componentDidMount() {
this.updateComponentState({tasks: this.props.tasks});
}
componentDidUpdate() {
this.prepUIForNextAddition();
}
// ...
}
