Реагировать важна из-за компонента, что делает важно для связи между компонентами. Эта статья кратко вводит некоторые из контента, доставляемых между общими комментариями реагирования. Я подведем обобщению следующих отношений:между родительским и дочерним компонентами,Между дочерним компонентом и родительским компонентом,Шаблоны издателя и подписчика (контекст),комната брата и сестры, redux — это тоже метод управления компонентами, но содержание управления состоянием redux — это больше, здесь только краткое введение, а затем я открою другую статью в деталях.
Родительский компонент взаимодействует с дочерним компонентом
Поток данных реакции односторонний, наиболее распространенным является передача значений от родительских компонентов к дочерним компонентам через пропсы.
Пример (ключевые разделы закомментированы):
Давайте сделаем простой пример выбора товара и последующего изменения цены.
class Parents extends Component {
//构造函数
constructor() {
super();
// 设置state
this.state = {
price: 0
};
}
clickGoods(e) {
//更新state
this.setState({
price: e
});
}
// 渲染
render() {
let { price } = this.state;
return (
<div>
<button onClick={this.clickGoods1.bind(this)}>goods1</button>
<button onClick={this.clickGoods2.bind(this)}>goods2</button>
// 父组件中
<Child price={price} />
</div>
);
}
}
Сборка: Свойство props используется в дочернем компоненте для получения переданных данных.
class Child extends Component {
render() {
{/*这里从props中拿到*/}
return <div> price: {this.props.price} </div>;
}
}
онлайн-код
код sandbox.io/yes/718oh 454th 6th…
Дочерний компонент взаимодействует с родительским компонентом
Затем мы делаем обратное и позволяем дочернему компоненту общаться с родительским компонентом. Основная идея связи между дочерним компонентом и родительским компонентом заключается в том, что родительский компонент передает функцию дочернему компоненту, а затем получает значение, переданное дочерним компонентом, через обратный вызов этой функции. Ниже приведен пример, прямо противоположный предыдущему: родительский компонент используется для отображения цены, дочерний компонент отображает две кнопки, а дочерний компонент передает цену родительскому компоненту.
Пример (ключевые разделы закомментированы):
родительский компонент
class Parents extends Component {
constructor() {
super();
this.state = {
price: 0
};
}
getItemPrice(e) {
this.setState({
price: e
});
}
render() {
return (
<div>
<div>price: {this.state.price}</div>
{/* 向子组件中传入一个函数 */}
<Child getPrice={this.getItemPrice.bind(this)} />
</div>
);
}
}
Подсборка
class Child extends Component {
clickGoods(e) {
// 在此函数中传入值
this.props.getPrice(e);
}
render() {
return (
<div>
<button onClick={this.clickGoods.bind(this, 100)}>goods1</button>
<button onClick={this.clickGoods.bind(this, 1000)}>goods2</button>
</div>
);
}
}
онлайн-код
код sandbox.io/yes/718oh 454th 6th…
Шаблоны издателя и подписчика (контекст)
Реквизиты React передаются от родительских компонентов к дочерним компонентам.Как только внучатые компоненты встречаются, их необходимо передавать вниз слой за слоем. Контекст предоставляет новый способ связи между компонентами (после версии 16.3), которые могут совместно использовать некоторые данные, а другие компоненты могут читать данные из контекста (аналогично источнику данных, компоненты могут подписываться на этот источник данных).
инструкции
Метод React.createContext()
Мы можем использовать createContext для создания контекста, который может получать переменную или объект в качестве параметра (когда объект является параметром, реакция использует object.is() для сравнения, что влияет на производительность). Это входящее значение используется как значение контекста по умолчанию.
const PriceContext = React.createContext('price')
Это создает контекст
Компонент поставщика
Провайдер используется для создания источников данных. Это корневой компонент, который обеспечивает источник данных для всех подкомпонентов. Он принимает значение в качестве реквизита, используемого для передачи значения, он изменит значение контекста по умолчанию. Поставщик может содержать несколько компонентов Consumer. Если компонент Provider является вложенным,
<PriceContext.Provider value={100}>
</PriceContext.Provider>
Потребительский компонент
Consumer представляет собой компонент, который принимает данные и принимает функцию в качестве дочернего элемента. Эта функция получит значение, переданное контекстом, и вернет компонент реакции. Компонент Consumer должен быть включен в Provider.
<PriceContext.Consumer>
{ /*这里是一个函数*/ }
{
price => <div>price：{price}</div>
}
</PriceContext.Consumer>
Пример
В этой части мы пытаемся передать значение непосредственно из родительского компонента во внучатый компонент, не проходя через дочерний компонент (передавая значение непосредственно из компонента A в компонент C, минуя компонент B).
// 创建Context
const PriceContext = React.createContext('price')
// A组件中
class ClassA extends Component {
constructor(){
super()
this.state={
price:0
}
}
// 点击按钮事件
clickGoods(e) {
this.setState({
price:e
})
}
render(){
const { price } = this.state
return(
// Provider
// 把state里price转到Provider的value中
<PriceContext.Provider value={price}>
<button onClick={this.clickGoods.bind(this, 100)}>goods1</button>
<button onClick={this.clickGoods.bind(this, 1000)}>goods2</button>
<ClassB />
</PriceContext.Provider>
)
}
}
// 组件B
class ClassB extends Component {
// 组件B中只是引用了ClassC，没有进行传值的操作
render(){
return(
<div><span>price:</span><span><ClassC /></span></div>
)
}
}
// 组件C
class ClassC extends Component {
render(){
return(
// Consumer,注意Consumer的下面要包含一个函数
<PriceContext.Consumer>
{
price=><span>{price}</span>
}
</PriceContext.Consumer>
)
}
}
Резюме и понимание контекста
Реагирующее приложение состоит из множества реагирующих компонентов, а некоторые компоненты вложены друг в друга, что может образовывать «цепочку компонентов». Контекст можно использовать как «область действия» компонента [3]. Корневой компонент определяет контекст, и компоненты в его цепочке компонентов могут обращаться к переменным или объектам, определенным в провайдере, как показано на рисунке ниже, что больше похоже на концепцию «области действия». Контекст может заменить некоторые избыточные функции в некоторых простых сценариях.
онлайн-код
код sandbox.io/yes/718oh 454th 6th…
Связь между родственными компонентами
Для связи компонентов между братьями и сестрами общая идея состоит в том, чтобы найти один и тот же родительский компонент.В настоящее время вы можете использовать свойства для передачи данных или вы можете использовать контекст для передачи данных. Конечно, некоторые глобальные механизмы также могут быть использованы для достижения связи, такие как избыточность.
резюме
В этой статье в основном представлена взаимосвязь трех видов общения.между родительским и дочерним компонентами,Между дочерним компонентом и родительским компонентом,Шаблоны издателя и подписчика (контекст), кратко описалкомната брата и сестрыКоммуникация. В основном он представляет два способа: использование свойства props и контекста. Также введено некоторое понимание контекста.
Reference:
[1] сегмент fault.com/ah/119000001…