Чтобы изменить состояние дочернего компонента от родительского без запуска метода рендеринга (в родительском): одним из возможных решений было бы использование Redux. С помощью Redux от родителя вы можете отправить действие (выполнить действие, которое изменяет состояние Redux). А в дочернем компоненте вы получаете ту часть состояния, которую вы изменяете (это может быть строка, объект и т. Д. c) в качестве реквизита. Поэтому, когда он будет изменен по сравнению с родительским, ваш дочерний компонент будет визуализироваться снова без необходимости запуска метода рендеринга в родительском.
https://react-redux.js.org/introduction/basic-tutorial
Вы также можете используйте Context для той же цели.
Однако я видел ваш пример кода, я не уверен в точной причине, почему вы не хотите делать рендер в родительском, но самое простое решение для того, что вы нужно будет отправить функцию, которую вы хотите выполнить в родительском объекте, в качестве реквизита, а также заголовок.
Если вы хотите изменить вещи из родительского, без повторного рендеринга с Redux, это будет примерно так:
у родителя
const changeTitle = (newTitle) => {
this.props.setTitle(newTitle);
}
return (
<div className="App">
<ChildComponent />
</div>
);
const mapDispatchToProps = dispatch => ({
setTitle: newTitle => dispatch(setTitleACTION(newTitle)),
});
у ребенка
return (
<div>
<h1>
{this.props.title}
</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
const mapStateToProps = ({ title }) => ({
title,
});
export default connect(mapStateToProps, null)(ChildComponent);
Снова, если вы сделаете в случае с Redux вы можете получить реквизит title из хранилища Redux , а в родительском вы измените эту переменную (вызывая действие Redux) без повторной визуализации родителя.
Если вы хотите запустить событие из Дочерний компонент, вы можете отправить действие из дочернего компонента или вызвать функцию (которую вы получаете из реквизита от родителя) и вызывать эту функцию всякий раз, когда вам нужно.