React的组件间通信
一、React的单向数据流
React是单向数据流，数据主要从父节点传递到子节点（通过props）。
如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。这通常被称为“自顶向下”或“单向”数据流。任何状态始终由某个特定组件所有，并且从该状态导出的任何数据或UI只能影响树中“下方”的组件。
二、React的组件间通信
1）父级-》子级
比较简单，直接调用时设置props值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var WebSite = React.createClass({
getInitialState: function() {
return {
name: "菜鸟教程",
site: "http://www.runoob.com"
};
}, render: function() {
return (
<div>
<Name name={this.state.name} />
<Link site={this.state.site} />
</div>
);
}
}); var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
}); var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
}); ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
</script>
</body>
</html>
2）子级-》父级
用回调函数，传参
class Father extends React.Component{
constructor(props){
super(props);
this.state={
inputValue:""
}
}
//在回调函数里处理子级的输入
handleInputChange(e){
this.setState({
inputValue:e.target.value
});
}
render(){
return (
<div>
<span>输入为{this.state.inputValue}</span>
<Child onChange={this.handleInput2Change.bind(this)} />
</div>
);
}
}
//通过onChange={this.props.onChange}，子级输入事件发生时，调用的是父级传入的回调函数
class Child extends React.Component{
render(){
return (
<div>
<input value={this.props.value} onChange={this.props.onChange}/>
</div>
);
}
}
ReactDOM.render(
<Father />,
document.getElementById('root')
);
3）兄弟《-》兄弟：
按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。其实这种实现方式与子组件更新父组件状态的方式是大同小异的。
下面实现一个组件通信的例子，一个输入框的数据改变，另一个输入框数据会跟随同时改变。
class Form1 extends React.Component{
constructor(props){
super(props);
this.state={
input1Value:"",
input2Value:""
}
}
handleInput1Change(e){
const input1=e.target.value;
let input2=input1-;
this.setState({
input1Value:input1,
input2Value:input2
});
}
handleInput2Change(e){
const input2=e.target.value;
let input1=input2- + ;
this.setState({
input1Value:input1,
input2Value:input2
});
}
render(){
return (
<div>
输入框1：
<Input1 value={this.state.input1Value} onChange={this.handleInput1Change.bind(this)} />
输入框2：
<Input2 value={this.state.input2Value} onChange={this.handleInput2Change.bind(this)} />
</div>
);
}
}
class Input1 extends React.Component{
render(){
return (
<div>
<input value={this.props.value} onChange={this.props.onChange}/>
</div>
);
}
}
class Input2 extends React.Component{
render(){
return (
<div>
<input value={this.props.value} onChange={this.props.onChange}/>
</div>
);
}
}
ReactDOM.render(
<Form1 />,
document.getElementById('root')
);
React的组件间通信的更多相关文章
- React Native组件间通信
React Native组件间通信 React Native组件的关系有:父子关系.无直接关系.组件间通信主要针对这两类来讨论. 一.父组件和子组件之间通信 父组件向子组件传递消息.数据通过对子组件的 ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- React独立组件间通信联动
React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通 ...
- React 精要面试题讲解(二) 组件间通信详解
单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...
- React 组件间通信介绍
React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍: 父组件向子 ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- react系列（三）组件间通信
组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- Linux x64 -- 内核程序（驱动程序）读取任意进程数据实现
四级页表结构 现在的64位Linux系统中,并没有使用全部的64位地址空间,而是使用其低48位,高16位并没有使用. 其中 39至47这9位用于索引PGD(page global directory) ...
- vmware 12中安装苹果系统
我用的系统是win10... 一.所需软件: 1.下载并安装VMware Workstation Pro 12 密码:7ybc和序列号 密码是:bwm0 2.下载unlocker 203(for OS ...
- Android开发——ListView使用技巧总结（二）
0. 前言 Android中的ListView是用的比较多的控件之一,在上一篇Android开发--ListView使用技巧总结(一)中对ListView的ViewHolder机制.优化卡顿方式以及 ...
- 【APIO2016】烟火表演
题面 题解 神仙题目啊QwQ 设\(f_i(x)\)表示以第\(i\)个点为根的子树需要\(x\)秒引爆的代价. 我们发现,这个函数是一个下凸的一次分段函数. 考虑这个函数合并到父亲节点时会发生怎样的 ...
- 使用 cron 定时任务实现 war 自动化发布
autoRelease.sh #!/bin/sh /home/tomcat/bin/shutdown.sh echo "tomcat stoped" cd /home/tomcat ...
- ABP从入门到精通（5）：.扩展国际化语言资源
ABP的有些组件使用的该组件自带的语言包资源,所以在有些时候会因为我们当前使用的语言对应的语言包不全,而造成日志一直记录WARN.ABP给我们提供了扩展语言包资源的接口,可以解决这个问题. 以下示例代 ...
- item 11: 比起private undefined function优先使用deleted function
本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 如果你为其他开发者提供代码,并且你想阻止他们调用一个特定的函数,你 ...
- NuGet 使用笔记
环境准备 1. 下载nuget : https://www.nuget.org/downloads 2. 设置到环境变量Path, 使生效:在Cmd打入: set path=abc 关闭Cmd (C ...
- PAT甲级题解-1066. Root of AVL Tree (25)-AVL树模板题
博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6803291.html特别不喜欢那些随便转载别人的原创文章又不给 ...
- linux第二次读书笔记
<Linux内核设计与实现>读书笔记 第五章 系统调用 第五章系统调用 系统调用是用户进程与内核进行交互的接口.为了保护系统稳定可靠,避免应用程序恣意忘形. 5．1与内核通信 系统调用 ...