5802人阅读
react（2）
父向子是用props，然后再子那边有一个监听函数
componentWillReceiveProps:function(nextProps){
this.setState({
visible:nextProps.visible,
item:nextProps.item,
value:nextProps.value,
version:nextProps.version
父类调用子类的函数
&!DOCTYPE html&
&head lang=&en&&
&meta charset=&UTF-8&&
&title&&/title&
&script src=&../../dist/react/react.js&&&/script&
&script src=&../../dist/react/JSXTransformer.js&&&/script&
&script src=&../../dist/jquery/jquery.min.js&&&/script&
&!--如下的这种引用方式是不正确的，必须使用上面的引用方式--&
&!--&script src=&../../dist/react/JSXTransformer.js&/&--&
&div id=&index-&&&/div&
&script type=&text/jsx&&
var ButtonComment = React.createClass({
getInitialState: function () {
return {count:0};
sendSword: function () {
var newCount = this.state.count + 1;
this.setState({count:this.state.count + 1});
this.props.getSwordCount();
render: function () {
&button onClick={this.sendSword}&{this.props.buttonName}&/button&
var ImDaddyComponent = React.createClass({
getInitialState: function () {
return {sendCount:0};
sendSword: function () {
this.refs.getSwordButton.sendSword();
getSwordCount: function () {
this.setState({sendCount:this.refs.getSwordButton.state.count + 1});
render: function () {
&ButtonComment ref=&getSwordButton& getSwordCount={this.getSwordCount} buttonName=&儿子送宝刀&/&
&button onClick={this.sendSword}&通过老爸送宝刀&/button&
父子俩共送{this.state.sendCount}把宝刀！！！
React.render(
&ImDaddyComponent /&,
document.getElementById('index-')
reactjs是一枚新进小鲜肉，跟gulp搭配流行一段时间了。工作或者面试中经常遇到这样的问题，“子组件如何向父组件传值？”。其实很简单，概括起来就是：react中state改变了，组件才会update。父写好state和处理该state的函数，同时将函数名通过props属性值的形式传入子，子调用父的函数，同时引起state变化。子组件要写在父组件之前。具体写法看下面3个例子。
例子1.这里如下图，用户邮箱为父，绿色框为子。 父组件为用户输入的邮箱设好state，即“{email: ''}”，同时写好处理state的函数，即“handleEmail”，这两个名称随意起；再将函数以props的形式传到子组件，子组件只需在事件发生时，调用父组件传过来的函数即可。&
//以下所有例子对应的html
&div id=&test&&&/div&
var Child = React.createClass({
render: function(){
请输入邮箱：&input onChange={this.props.handleEmail}/&
//父组件，此处通过event.target.value获取子组件的值
var Parent = React.createClass({
getInitialState: function(){
handleEmail: function(event){
this.setState({email: event.target.value});
render: function(){
&div&用户邮箱：{this.state.email}&/div&
&Child name=&email& handleEmail={this.handleEmail}/&
React.render(
&Parent /&,
document.getElementById('test')
例子2.有时候往往需要对数据做处理，再传给父组件，比如过滤或者自动补全等等，下面的例子对用户输入的邮箱做简单验证，自动过滤非数字、字母和&@.&以外的字符。
//子组件，handleVal函数处理用户输入的字符，再传给父组件的handelEmail函数
var Child = React.createClass({
handleVal: function() {
var val = this.refs.emailDom.
val = val.replace(/[^0-9|a-z|\@|\.]/ig,&&);
this.props.handleEmail(val);
render: function(){
请输入邮箱：&input ref=&emailDom& onChange={this.handleVal}/&
//父组件，通过handleEmail接受到的参数，即子组件的值
var Parent = React.createClass({
getInitialState: function(){
handleEmail: function(val){
this.setState({email: val});
render: function(){
&div&用户邮箱：{this.state.email}&/div&
&Child name=&email& handleEmail={this.handleEmail}/&
React.render(
&Parent /&,
document.getElementById('test')
例子3.如果还存在孙子组件的情况呢？如下图，黑框为父，绿框为子，红框为孙，要求子孙的数据都传给爷爷。原理一样的，只是父要将爷爷对孙子的处理函数直接传下去。
//孙子，将下拉选项的值传给爷爷
var Grandson = React.createClass({
render: function(){
&div&性别：
&select onChange={this.props.handleSelect}&
&option value=&男&&男&/option&
&option value=&女&&女&/option&
//子，将用户输入的姓名传给爹
//对于孙子的处理函数，父只需用props传下去即可
var Child = React.createClass({
render: function(){
姓名：&input onChange={this.props.handleVal}/&
&Grandson handleSelect={this.props.handleSelect}/&
//父组件，准备了两个state，username和sex用来接收子孙传过来的值，对应两个函数handleVal和handleSelect
var Parent = React.createClass({
getInitialState: function(){
username: '',
handleVal: function(event){
this.setState({username: event.target.value});
handleSelect: function(event) {
this.setState({sex: event.target.value});
render: function(){
&div&用户姓名：{this.state.username}&/div&
&div&用户性别：{this.state.sex}&/div&
&Child handleVal={this.handleVal} handleSelect={this.handleSelect}/&
React.render(
&Parent /&,
document.getElementById('test')
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：162544次
积分：2373
积分：2373
排名：第18010名
原创：60篇
转载：106篇
(2)(9)(1)(13)(2)(5)(5)(3)(4)(2)(4)(8)(7)(17)(24)(3)(4)(3)(10)(2)(12)(24)(4)
(window.slotbydup = window.slotbydup || []).push({
id: '4740890',
container: s,
size: '250,250',
display: 'inlay-fix'在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如下代码，LikeButton的动作如何操作LikeText的state？或者调用changeLike方法？新手求教。
&!DOCTYPE html&
&meta http-equiv='Content-type' content='text/ charset=utf-8'&
&title&TEST&/title&
&h2&TEST&/h2&
&div id="container"&&/div&
&div id="container2"&&/div&
&script src="http://reactjs.cn/react/js/react.js"&&/script&
&script src="http://reactjs.cn/react/js/JSXTransformer.js"&&/script&
&script type="text/jsx"&
var LikeText = React.createClass({
getInitialState: function() {
return {liked: false};
changeLike: function() {
this.setState({
liked: !this.state.liked
render: function() {
var text = this.props.liked ? 'like' : 'haven\'t liked';
You {text} this. Click btn to toggle.
React.render(
&LikeText /&,
document.getElementById('container')
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
handleClick: function(event) {
this.setState({liked: !this.state.liked});
render: function() {
var text = this.state.liked ? 'unlike' : 'like';
&button onClick={this.handleClick}&{text}&/button&
React.render(
&LikeButton /&,
document.getElementById('container2')
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
EventEmitter
React Context
将两个组件用父组件包裹起来
还有个小建议，React.render应该只调用一次。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
需要控制LikeText的那个state除了通过自身state控制外再加上props控制，LikeButton通过改变LikeText的props来控制，需要用到componentWillReceiveProps，代码参考如下：
componentWillReceiveProps (nextProps) {
if (nextProps.value !== this.state.value) {
this.setState({
value: nextProps.value
getInitialState() {
value: this.props.value || defaultState
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。reactjs 里面，组件相互之间怎么通信_百度知道
reactjs 里面，组件相互之间怎么通信
我有更好的答案
GenderSelect handleSelect={this，委托调用父组件的处理函数，从而实现把值传给父组件（return &）reactjs子组件传递数据给父组件父组件嵌套子组件，父组件的处理函数通过属性的方式赋值组子组件（&lt，子组件通过触发事件.setState({gender: event.handleSelect}&&/GenderSelect&gt.handleSelect}&.select onChange={this，handleSelect: function(event) {this
采纳率：73%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。React 组件间通讯
React 组件间通讯
说 React 组件间通讯之前，我们先来讨论一下 React 组件究竟有多少种层级间的关系。假设我们开发的项目是一个纯 React 的项目，那我们项目应该有如下类似的关系：
父子：Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1
兄弟：Child_1 与 Child_2、Child_1_1 与 Child_2、etc.
针对这些关系，我们将来好好讨论一下这些关系间的通讯方式。
React 组件间通讯
说 React 组件间通讯之前，我们先来讨论一下 React 组件究竟有多少种层级间的关系。假设我们开发的项目是一个纯 React 的项目，那我们项目应该有如下类似的关系：
父子：Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1
兄弟：Child_1 与 Child_2、Child_1_1 与 Child_2、etc.
针对这些关系，我们将来好好讨论一下这些关系间的通讯方式。
（在 React 中，React 组件之间的关系为从属关系，与 DOM 元素之间的父子关系有所不同，下面只是为了说明方便，将 React 组件的关系类比成父子关系进行阐述）
父组件向子组件通讯
通讯是单向的，数据必须是由一方传到另一方。在 React 中，父组件可以向子组件通过传 props 的方式，向子组件进行通讯。
class Parent extends Component{
msg: 'start'
componentDidMount() {
setTimeout(() =& {
this.setState({
msg: 'end'
render() {
msg={this.state.msg} /&;
}}class Child_1 extends Component{
render() {
return &{this.props.msg}&
如果父组件与子组件之间不止一个层级，如 Parent 与 Child_1_1 这样的关系，可通过 ... 运算符（Object 剩余和展开属性），将父组件的信息，以更简洁的方式传递给更深层级的子组件。通过这种方式，不用考虑性能的问题，通过 babel 转义后的 ... 运算符 性能和原生的一致，且上级组件 props 与 state 的改变，会导致组件本身及其子组件的生命周期改变，
class Child_1 extends Component{
render() {
&{this.props.msg}&
{...this.props}/&
}}class Child_1_1 extends Component{
render() {
return &{this.props.msg}&
子组件向父组件通讯
在上一个例子中，父组件可以通过传递 props 的方式，自顶而下向子组件进行通讯。而子组件向父组件通讯，同样也需要父组件向子组件传递 props 进行通讯，只是父组件传递的，是作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中。
class Parent extends Component{
msg: 'start'
transferMsg(msg) {
this.setState({
render() {
&child msg: {this.state.msg}&
transferMsg = {msg =& this.transferMsg(msg)} /&
}}class Child_1 extends Component{
componentDidMount() {
setTimeout(() =& {
this.props.transferMsg('end')
render() {
&child_1 component&
在上面的例子中，我们使用了 箭头函数，将父组件的 transferMsg 函数通过 props 传递给子组件，得益于箭头函数，保证子组件在调用 transferMsg 函数时，其内部 this 仍指向父组件。
当然，对于层级比较深的子组件与父组件之间的通讯，仍可使用 ... 运算符，将父组件的调用函数传递给子组件，具体方法和上面的例子类似。
兄弟组件间通讯
对于没有直接关联关系的两个节点，就如 Child_1 与 Child_2 之间的关系，他们唯一的关联点，就是拥有相同的父组件。参考之前介绍的两种关系的通讯方式，如果我们向由 Child_1 向 Child_2 进行通讯，我们可以先通过 Child_1 向 Parent 组件进行通讯，再由 Parent 向 Child_2 组件进行通讯，所以有以下代码。
class Parent extends Component{
msg: 'start'
transferMsg(msg) {
this.setState({
componentDidUpdate() {
console.log('Parent update');
render() {
&Child_1 transferMsg = {msg =& this.transferMsg(msg)} /&
&Child_2 msg = {this.state.msg} /&
}}class Child_1 extends Component{
componentDidMount() {
setTimeout(() =& {
this.props.transferMsg('end')
componentDidUpdate() {
console.log('Child_1 update');
render() {
return &div&
&p&child_1 component&/p&
}}class Child_2 extends Component{
componentDidUpdate() {
console.log('Child_2 update');
render() {
return &div&
&p&child_2 component: {this.props.msg}&/p&
&Child_2_1 /&
}}class Child_2_1 extends Component{
componentDidUpdate() {
console.log('Child_2_1 update');
render() {
return &div&
&p&child_2_1 component&/p&
然而，这个方法有一个问题，由于 Parent 的 state 发生变化，会触发 Parent 及从属于 Parent 的子组件的生命周期，所以我们在控制台中可以看到，在各个组件中的 componentDidUpdate 方法均被触发。
有没有更好的解决方式来进行兄弟组件间的通讯，甚至是父子组件层级较深的通讯的呢？
观察者模式
在传统的前端解耦方面，观察者模式作为比较常见一种设计模式，大量使用在各种框架类库的设计当中。即使我们在写 React，在写 JSX，我们核心的部分还是 JavaScript。
观察者模式也叫 发布者-订阅者模式，发布者发布事件，订阅者监听事件并做出反应，对于上面的代码，我们引入一个小模块，使用观察者模式进行改造。
import eventProxy from '../eventProxy'class Parent extends Component{
render() {
}}class Child_1 extends Component{
componentDidMount() {
setTimeout(() =& {
eventProxy.trigger('msg', 'end');
}}class Child_2 extends Component{
msg: 'start'
componentDidMount() {
eventProxy.on('msg', (msg) =& {
this.setState({
render() {
&child_2 component: {this.state.msg}&
我们在 child_2 组件的 componentDidMount 中订阅了 msg 事件，并在 child_1 componentDidMount 中，在 1s 后发布了 msg 事件，child_2 组件对 msg 事件做出相应，更新了自身的 state，我们可以看到，由于在整个通讯过程中，只改变了 child_2 的 state，因而只有 child_2 和 child_2_1 出发了一次更新的生命周期。
而上面代码中，神奇的 eventProxy.js 究竟是怎样的一回事呢？
'use strict';const eventProxy = {
onObj: {},
oneObj: {},
on: function(key, fn) {
if(this.onObj[key] === undefined) {
this.onObj[key] = [];
this.onObj[key].push(fn);
one: function(key, fn) {
if(this.oneObj[key] === undefined) {
this.oneObj[key] = [];
this.oneObj[key].push(fn);
off: function(key) {
this.onObj[key] = [];
this.oneObj[key] = [];
trigger: function() {
if(arguments.length == 0) {
return false;
key = arguments[0];
args = [].concat(Array.prototype.slice.call(arguments, 1));
if(this.onObj[key] !== undefined
&& this.onObj[key].length & 0) {
for(let i in this.onObj[key]) {
this.onObj[key][i].apply(null, args);
if(this.oneObj[key] !== undefined
&& this.oneObj[key].length & 0) {
for(let i in this.oneObj[key]) {
this.oneObj[key][i].apply(null, args);
this.oneObj[key][i] = undefined;
this.oneObj[key] = [];
}};export default eventP
eventProxy 中，总共有 on、one、off、trigger 这 4 个函数：
Flux 与 Redux
Flux 作为 Facebook 发布的一种应用架构，他本身是一种模式，而不是一种框架，基于这个应用架构模式，在开源社区上产生了众多框架，其中最受欢迎的就是我们即将要说的 Redux。更多关于 Flux 和 Redux 的介绍这里就不一一展开，有兴趣的同学可以好好看看 、等相关资料。
下面将来好好聊聊 Redux 在组件间通讯的方式。
Flux 需要四大部分组成：Dispatcher、Stores、Views/Controller-Views、Actions，其中的 Views/Controller-Views 可以理解为我们上面所说的 Parent 组件，其作用是从 state 当中获取到相应的数据，并将其传递给他的子组件（descendants）。而另外 3 个部分，则是由 Redux 来提供了。
import {createStore} from 'redux'function reducer(state = {}, action) {
return}let store = createStore(reducer);class Child_1 extends Component{
componentDidMount() {
setTimeout(() =& {
store.dispatch({
type: 'child_2',
data: 'hello'
setTimeout(() =& {
store.dispatch({
type: 'child_2_1',
data: 'bye'
}}class Child_2 extends Component{
msg: 'start'
componentDidUpdate() {
console.log('Child_2 update', store.getState());
componentDidMount() {
store.subscribe(() =& {
let state = store.getState();
if (state.type === 'child_2') {
this.setState({
msg: state.data
}}class Child_2_1 extends Component{
msg: 'start'
componentDidUpdate() {
console.log('Child_2_1 update', store.getState());
componentDidMount() {
store.subscribe(() =& {
let state = store.getState();
if (state.type === 'child_2_1') {
this.setState({
msg: state.data
render() {
&child_2_1 component: {this.state.msg}&
在上面的例子中，我们将一个名为 reducer 的函数作为参数，生成我们所需要的 store，reducer 接受两个参数，一个是存储在 store 里面的 state，另一个是每一次调用 dispatch 所传进来的 action。reducer 的作用，就是对 dispatch 传进来的 action 进行处理，并将结果返回。而里面的 state 可以通过 store 里面的 getState 方法进行获得，其结果与最后一次通过 reducer 处理后的结果保持一致。
在 child_1 组件中，我们每隔 1s 通过 store 的 dispatch 方法，向 store 传入包含有 type 字段的 action，reducer 直接将 action 进行返回。
而在 child_2 与 child_2_1 组件中，通过 store 的 subscribe 方法，监听 store 的变化，触发 dispatch 后，所有通过 subscribe 进行监听的函数都会作出相应，根据当前通过 store.getState() 获取到的结果进行处理，对当前组件的 state 进行设置。所以我们可以在控制台上看到各个组件更新及存储在 store 中 state 的情况：
在 Redux 中，store 的作用，与 MVC 中的 Model 类似，可以将我们项目中的数据传递给 store，交给 store 进行处理，并可以实时通过 store.getState() 获取到存储在 store 中的数据。我们对上面例子的 reducer 及各个组件的 componentDidMount 做点小修改，看看 store 的这一个特性。
import {createStore} from 'redux'function reducer(state = {}, action) {
switch (action.type) {
case 'child_2':
state.child_2 = action.data + ' child_2';
case 'child_2_1':
state.child_2_1 = action.data + ' child_2_1';
return state
}}let store = createStore(reducer);class Child_1 extends Component{
componentDidMount() {
setTimeout(() =& {
store.dispatch({
type: 'child_2',
data: 'hello'
setTimeout(() =& {
store.dispatch({
type: 'child_2_1',
data: 'bye'
}}class Child_2 extends Component{
componentDidMount() {
store.subscribe(() =& {
let state = store.getState();
if (state.hasOwnProperty('child_2')) {
this.setState({
msg: state.child_2
}}class Child_2_1 extends Component{
componentDidMount() {
store.subscribe(() =& {
let state = store.getState();
if (state.hasOwnProperty('child_2_1')) {
this.setState({
msg: state.child_2_1
我们对创建 store 时所传进去的 reducer 进行修改。reducer 中，其参数 state 为当前 store 的值，我们对不同的 action 进行处理，并将处理后的结果存储在 state 中并进行返回。此时，通过 store.getState() 获取到的，就是我们处理完成后的 state。
Redux 内部的实现，其实也是基于观察者模式的，reducer 的调用结果，存储在 store 内部的 state 中，并在每一次 reducer 的调用中并作为参数传入。所以在 child_1 组件第 2s 的 dispatch 后，child_2 与 child_2_1 组件通过 subscribe 监听的函数，其通过 getState 获得的值，都包含有 child_2 与 child_2_1 字段的，这就是为什么第 2s 后的响应，child_2 也进行了一次生命周期。所以在对 subscribe 响应后的处理，最好还是先校对通过 getState() 获取到的 state 与当前组件的 state 是否相同。
componentDidMount() {
store.subscribe(() =& {
let state = store.getState();
if (state.hasOwnProperty('child_2')
&& state.child_2 !== this.state.msg) {
this.setState({
msg: state.child_2
加上这样的校验，各个组件的生命周期的触发就符合我们的预期了。
Redux 对于组件间的解耦提供了很大的便利，如果你在考虑该不该使用 Redux 的时候，社区里有一句话说，“当你不知道该不该使用 Redux 的时候，那就是不需要的”。Redux 用起来一时爽，重构或者将项目留给后人的时候，就是个大坑，Redux 中的 dispatch 和 subscribe 方法遍布代码的每一个角落。刚刚的例子不是最好的，Flux 设计中的 Controller-Views 概念就是为了解决这个问题出发的，将所有的 subscribe 都置于 Parent 组件（Controller-Views），由最上层组件控制下层组件的表现，然而，这不就是我们所说的 子组件向父组件通讯 这种方式了。
转载自：http://taobaofed.org/blog//react-components-communication/
作者：斗臣
版权声明：本文内容由互联网用户自发贡献，版权归作者所有，本社区不拥有所有权，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至： 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
用云栖社区APP，舒服~
【云栖快讯】中办国办印发《推进互联网协议第六版（IPv6）规模部署行动计划》加快推进基于 IPv6 的下一代互联网规模部署，计划指出2025年末中国 IPv6 规模要达到世界第一,阿里云也第一时间宣布了将全面提供IPv6服务，那么在全面部署 IPV6 前，你需要了解都在这儿&&
凝聚阿里巴巴多年来在无线业务安全防御的成功经验和技术成果，并面向开发者和企业提供安全扫描、应用加固、安全组件、数...
一站式提供企业即时通讯、销售管理、协同办公。
一站式提供企业即时通讯、销售管理、协同办公。
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
订阅广场全新上线
Loading...1&什么是component
设计接口的时候，把通用的设计元素（按钮，表单框，布局组件等）拆成接口良好定义的可复用的组件。 这样，下次开发相同界面程序时就可以写更少的代码，也意义着更高的开发效率，更少的 Bug 和更少的程序体积。&&里面举了一个React 构建可搜索的商品数据的例子。
接下来我们将创建一个好玩的component来全面了解它的组成和运行机制， 回顾一下我们在中的&public/index.html&它是直接引用了webpack生成的client.min.js（console里面打印文字）。 这样一点都不好玩，接来下我们从头开始构造一个完成的index.hmtl页面.
&meta charset="utf-8"&
&title&React's Component Example&/title&
&div id="app"&&/div&
&script src="client.min.js" type="text/javascript"&&/script&
&在html里面定义一个id= "app" 的 div标签并引用client.min.js,这个html就是我们的入口。 时刻记得client.min.js是来自于webpack的entry: src/client.js 里面生成的。 所以我们就通过client.js来操作html中的div构建页面。
import React from 'react';
import ReactDom from "react-dom";
import Layout from "./component/Layout";
const app = document.getElementById("app");
ReactDom.render(&Layout /&, app);
&看懂上面的语法你应该要学会的是基本的, 看完后问自己2个问题：
1. 为什么要使用JSX语法？
2. JSX和HTML的差异是什么？
这里你只需要知道 &Layout /& 是引用Layout Component。
页面的构成应该是（页面就是一个Tree，不要什么都堆在一起）
import React from 'react';
import Footer from "./Footer";
import Header from "./Header";
export default class Layout extends React.Component {
render() {
return (&div&
&Header /&
&Footer /&
&component 必须要定义的render函数,render是核心, 它组装生成这个组件的HTML结构（使用原生HTML标签或者子组件)。
当调用的时候，会检测 this.props 和 this.state，返回一个单子级组件(注意只能是单个，所以我们用div把header和footer包了一层)。
该子级组件可以是虚拟的本地 DOM 组件（比如 &div /& 或者 React.DOM.div()），也可以是自定义的复合组件。
你也可以返回 null 或者 false 来表明不需要渲染任何东西。 实际上，react 渲染一个 &noscript& 标签来处理当前的差异检查逻辑。当返回 null 或者 false 的时候，this.getDOMNode() 将返回 null。
render() 函数应该是纯粹的，也就是说该函数不修改组件state， 每次调用都返回相同的结果，不读写 DOM 信息，也不和浏览器交互（例如通过使用setTimeout）。 如果需要和浏览器交互，在 componentDidMount() 中或者其它生命周期方法中做这件事。保持 render() 纯粹，可以使服务器端渲染更加切实可行，也使组件更容易被理解。
import React from "react";
export default class Footer extends React.Component {
render() { return(&div& &h3& Footer: Building UI is a funny thing &/h3& &/div&);}
只是简单的把自己用h1显示出来
2.3.&定义Header
import React from "react";
import Title from "./Title";
export default class Header extends React.Component {
render() {
return(&div&
&h3& Header: Component create a new world &/h3&
我们就可以看到它引用了Title
2.4. 定义Title
import React from "react";
export default class Title extends React.Component {
render() {
return(&div&
&h2& Title: Everything is Component
这上面都是静态的东西，根本就看不出component有什么值得炫酷的地方，只是显示了 title header footer。 离标题Title随着我们给定的输入框的文字变化还差得远 不过在开始之前, 应该先预习一下弄明白它的state和prop。
2. state是component的当前状态，可以把component简单看成一个&状态机&，根据状态state 呈现不同的UI展示。
一旦状态（数据）更改，component就会自动调用render重新渲染UI，这个更改的动作会通过 this.setState方法来触发。
3. 一条原则：让component尽可能地少状态。这样组件逻辑就越容易维护。当更改这个状态（数据）需要更新组件UI的就可以认为是state
4. 无状态compoent, 我们上面的4个就是这种无状态的。
你也可以用纯粹的函数来定义无状态的组件(stateless function)， 这种组件没有状态，没有生命周期，只是简单的接受props 渲染生成DOM 结构。无状态组件非常简单，开销很低，如果可能的话尽量使用无状态组件。
我们要做的就是Layout把要改变的title和改变title的函数一级一级的传给下级的component 这必须要用到component间是怎么通信的。
import React from "react";
import Title from "./Title";
export default class Header extends React.Component {
handleChange(e) {
const title = e.target.
this.props.changeTitle(title);
render() {
return(&div&
&Title title={this.props.title}/&
&input value={this.props.title} onChange= {this.handleChange.bind(this)}/&
&input value={this.props.title} onChange= {this.handleChange.bind(this)}/&
Header把title又往下传递给应该处理的Title Component，&自己又建了两个输入框，初始值为title,然后再定义一个onChange事件
import React from "react";
export default class Title extends React.Component {
render() {
return(&div&
&h2& {this.props.title}
这里发生了一件非常奇妙的事，我们在Layout Header Title 里都有state, 我们通过input输入框输入文字触发Layout的SetState方法， 结果所有的State里面的title都跟着变化啦，这就是virtual DOM的好处,react把操作真实DOM的操作又封装了一层，让我们不用操心哪一个DOM应该更新这种事。 JS很快，慢的只是刷新DOM里面的tree, 而且繁锁， 但是react把刷新DOM的操作透明了，简直太贴心啦。
&我们打开chrome developer tool 里面timeline的 Rendering下的Enable paint flashing,看看我们在输入的时候是哪一些DOM刷新啦。&
阅读(...) 评论()