react笔记1

作者：猫儿 | 来源：互联网 | 2023-09-23 20:00

1.组件内部可以是组件2.组件通过state属性来保存组件的内部状态变量3.state属性是只读的，只能通过setState()方法来修改4.组件内部各个兄弟组件间值的传递5.复杂

1.组件内部可以是组件

import React from "react";
import ReactDOM from "react-dom";//渲染到页面上
// 可以是组件
class ChildA extends React.Component{
render(){
return

{this.props.name}

}
}
class Root extends React.Component{
render(){
return (

hello,world

);
}
}
ReactDOM.render(,document.getElementById(‘root‘));

2.组件通过state属性来保存组件的内部状态变量

import React from "react";
import ReactDOM from "react-dom";
class Root extends React.Component {
state={value:‘abc‘};
render(){
return

{`hello,${this.state.value}`}

}
}
ReactDOM.render(,document.getElementById(‘root‘));

3.state属性是只读的，只能通过setState()方法来修改

import React from "react";
import ReactDOM from "react-dom";
class Root extends React.Component {
state={value:‘abc‘};
render(){
setTimeout(()=>this.setState({value:"wang"}),2000); // 表示2秒后自动改变
return

{`hello,${this.state.value}`}

}
}
ReactDOM.render(,document.getElementById(‘root‘));

4.组件内部各个兄弟组件间值的传递

class Root extends React.Component{
state={value:‘abc‘};
handlerChange(e){ // 绑定的函数
this.setState({value:e.target.value});
}
render(){
return (

hello,world

this.state.value} OnChange={this.handlerChange.bind(this)}/>
outer:{this.state.value} //这里面的值会随着 input 标签里面的值改变而改变

);
}
}
ReactDOM.render(,document.getElementById(‘root‘));

5.复杂一点的封装

import React from "react";
import ReactDOM from "react-dom";
class ChildA extends React.Component{
render(){
return

{`hello,${this.props.val}`}

}
}
class Root extends React.Component{
state={value:‘abc‘};
handlerChange(e){ // 绑定的函数
this.setState({value:e.target.value});
}
render(){
return (

hello,world

this.state.value} OnChange={this.handlerChange.bind(this)}/>
this.state.value}/>

);
}
}
ReactDOM.render(,document.getElementById(‘root‘));

6.怎样将外部组件里面的值传递出来 :组件之间通过props来通信

import React from "react";
import ReactDOM from "react-dom";
class InputComponent extends React.Component{ // 怎样将 InputComponent里面的值传递到下面的span里面
render(){
return this.props.value} OnChange={event=>this.props.change(event.target.value)}/>
} // 注意这里的 value属性不能是固定的值否则的话他就一直是这个值不会改变
}
// 怎样将值传递出去 props组件间通信
class Root extends React.Component{
state={value:‘abc‘};
handlerChange(val){
this.setState({value:val});
}
render(){
return (

hello,world

this.state.value} change={this.handlerChange.bind(this)}/>
{this.state.value}

);
}
}
ReactDOM.render(,document.getElementById(‘root‘));

将span也封装成一个Component 也是通过props来传递属性的

class InputComponent extends React.Component {
render(){
return this.props.val} OnChange={e=>this.props.change(e.target.value)}/> // props可以传递的是函数
}
}
class Label extends React.Component {
render(){
return {this.props.val}
}
}
class Root extends React.Component {
state={value:"abc"};
handlerChange(val){
this.setState({value:val});
}
render(){
return (

this.state.value} change={this.handlerChange.bind(this)}/>
this.state.value}/>

);
}
}
ReactDOM.render(,document.getElementById(‘root‘));

7.props传递的值可以是任何东西，甚至是组件

class InputComponent extends React.Component{
render(){
return this.props.val} OnChange={event=>this.props.change(event.target.value)}/>
}
}
class Label extends React.Component {
render(){
return (

{this.props.val}

{this.props.comp}

);
}
}
class Root extends React.Component{
state={value:‘abc‘};
handlerChange(val){
this.setState({value:val});
}
render(){
return (

this.state.value} change={this.handlerChange.bind(this)}/>
this.state.value} comp={this.state.value} change={this.handlerChange.bind(this)}/>}/>

);// props传递的甚至可以是组件
}
}
ReactDOM.render(,document.getElementById(‘root‘));

8.props的特殊属性

class InputComponent extends React.Component{
render(){
return this.props.value} OnChange={event=>this.props.onChange(event.target.value)}/>
}
}
class ChildA extends React.Component{
render(){
return (

{`wang,${this.props.val}`}

{this.props.children}

); // 特殊的props属性
}
}
class Root extends React.Component{
state={value:‘abc‘};
handlerChange(val){
this.setState({value:val});
}
render(){
return (

this.state.value} OnChange={this.handlerChange.bind(this)}/>
this.state.value}>
child 1
child 2
child 3

);// props传递的甚至可以是组件
}
}
ReactDOM.render(,document.getElementById(‘root‘));

input的value属性不能是一个固定的值,否则他就一直不变了

class Root extends React.Component{
state={value:"wang"};
change(e){
this.setState({value:e.target.value});
}
render(){
return (

//注意这里的value不能是一个固定的值
this.state.value} OnChange={this.change.bind(this)}/>
outer:{this.state.value}

)
}
}
ReactDOM.render(,document.getElementById(‘root‘));

9.无状态组件

react15才新引入无状态组件(也叫函数式组件) 因为大多数时候，组件是很简单的不需要状态

也不需要生命周期函数，而只需要一个render函数，于是无状态组件应运而生。

const Root1 = props=>

hello,world

; //如果是多行用括号括起来

ReactDOM.render(, document.getElementById(‘root‘));

因为是一个函数，所以也就没有 this 写起来十分简单可以有 props

const Root = props=>(

hello,world

{props.value}

);

ReactDOM.render(, document.getElementById(‘root‘));

10.需求:给组件加一个隐藏的

用高阶组件实现

class Root extends React.Component {
render(){
return (

);
}
}
ReactDOM.render(,document.getElementById(‘root‘));

技术分享

11.如果要给每一个组件加上一个隐藏的div怎么实现使用高阶组件

接受一个component返回一个Component

const inject=function (Component) { // 接受一个Component,返回一个Component
return class extends React.Component{
render(){
return (

// 注意这里是两个大括号

// 这个是传递进来的参数

);
}
}
};
class Root extends React.Component {
render(){
return (

hello,world

)
}
}
const _Root=inject(Root);
ReactDOM.render(<_Root />,document.getElementById(‘root‘));

技术分享

12.高阶组件装饰器的写法

const inject=function (Component) {
return class extends React.Component{
render(){
return (

);
}
}
};
@inject // 很遗憾目前es只支持类装饰器不支持普通函数的装饰器
class Root extends React.Component {
render(){
return (

hello,world

)
}
}
ReactDOM.render(,document.getElementById(‘root‘));

13.带参数的装饰器的写法

(1)不适用无状态组件的方式

const inject=id=>Comp=>class extends React.Component {
render() {
return (

}
};
@inject(‘123456‘)
class Root extends React.Component {
render(){
return (

hello,world

)
}
}
ReactDOM.render(,document.getElementById(‘root‘));

拆解该函数接受 id 作为参数返回接受组件作为参数的函数，作为组件作为参数的函数，返回一个包装后的组件

const inject=function (id) {
return function (Comp) {
return class extends React.Component {
render(){
return (

}
}
}
};
@inject(‘123‘)
class Root extends React.Component {
render(){
return (

hello,world

)
}
}
ReactDOM.render(,document.getElementById(‘root‘));

(2)使用无状态组件来重写该函数 (最后一步可以写成无状态组件的形式)

const inject=id=>Comp=>props=>{
return (

};
@inject(‘1234‘)
class Root extends React.Component {
render(){
return (

hello,world

)
}
}
ReactDOM.render(,document.getElementById(‘root‘));

14.解决传入的Component有属性的问题

const inject=id=>Comp=>props=>{
return (

//只需要在这里使用解构即可

)
};
@inject(‘1234‘)
class Root extends React.Component {
render(){
return (

hello,{this.props.name}

)
}
}
ReactDOM.render(,document.getElementById(‘root‘));

15.组件的生命周期函数

class Root extends React.Component {
state={value:0};
render(){
setInterval(()=>this.setState({value:this.state.value+1}),3000);
return this.state.value}/>
}
}
class App extends React.Component{
componentWillMount(){ // 第一次render 之前执行
console.log("componentWillMount",new Date());
}
componentDidMount (){ // 第一次render之后执行
console.log("componentDidMount",new Date());
}
componentWillReceiveProps(props){
this.props=props; //当props发生变更的时候执行
console.log("componentWillReceiveProps",new Date());
}
shouldComponentUpdate(props,state){
return true;//componentWillReceiveProps 之后或者state发生改变的时候
}
componentWillUpdate(){ //除了首次render之外每次render之前执行
console.log("componentWillUpdate",new Date());
}
componentDidUpdate(){ //除了首次render之外每次render之后执行
console.log("componentWillUpdate",new Date());
}
componentWillUnmount(){ //卸载该组件的时候
console.log("componentWillUnmount",new Date());
}
render(){
console.log(‘render‘);
return (

{this.props.value}

);
}
}
ReactDOM.render(,document.getElementById(‘root‘));

推荐阅读

text
深入理解CSS中的margin属性及其应用场景

本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ... [详细]

蜡笔小新 2023-12-12 18:01:10
java
猜字母游戏

猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]

蜡笔小新 2023-12-13 12:04:03
java
asp.net微信公众平台开发目录汇总陆续更新的相关内容

本文内容为asp.net微信公众平台开发的目录汇总，包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建（接入）、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面，适合综合运用。 ... [详细]

蜡笔小新 2023-12-14 22:40:22
function
lua语言闭包、模式匹配、日期、编译、模块的特性及应用

本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]

蜡笔小新 2023-12-14 18:18:21
function
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
text
C#之数据集：DataSet对象的使用及相关方法详解

本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]

蜡笔小新 2023-12-14 12:09:13
text
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
text
ABAP开发发送邮件程序的配置和代码整理

本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细]

蜡笔小新 2023-12-13 15:50:17
string
动态规划算法的基本步骤及最长递增子序列问题详解

本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]

蜡笔小新 2023-12-13 15:38:19
jar
Java验证码——kaptcha的使用配置及样式

本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]

蜡笔小新 2023-12-13 13:58:25
jar
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33
jar
指针的引用以及在什么情况下使用指针的引用

本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址，通过指针可以修改指针所指的变量的值。然而，如果想要修改指针的指向，就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法，并思考了在修改指针的指向后，取指针的输出结果。 ... [详细]

蜡笔小新 2023-12-13 12:54:29
jar
工程中添加Android Dependencies

在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]

蜡笔小新 2023-12-13 12:08:09
jar
CentOS 7部署KVM虚拟化环境之一架构介绍

本文介绍了CentOS 7部署KVM虚拟化环境的架构，详细解释了虚拟化技术的概念和原理，包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ... [详细]

蜡笔小新 2023-12-12 21:38:57
jar
解析GRE报文长度的方法及实现步骤

本文介绍了一种解析GRE报文长度的方法，通过分析GRE报文头中的标志位来计算报文长度。具体实现步骤包括获取GRE报文头指针、提取标志位、计算报文长度等。该方法可以帮助用户准确地获取GRE报文的长度信息。 ... [详细]

蜡笔小新 2023-12-12 20:55:05

猫儿

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章