React入门--第二天

最新推荐文章于 2022-10-31 09:42:05 发布
最新推荐文章于 2022-10-31 09:42:05 发布
阅读量113 收藏
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44809439/article/details/109685767
版权
  • 类组件和函数组件
  • 如何使用props和state
  • 如何绑定事件

props对应Vue中的props
state对应Vue中的data

就目前而言，返回React元素的函数就是组件
在Vue里面，一个构造选项就可以表示一个组件

函数组件

function Welcome(props){
  return <h1>hello,{props.name}</h1>
}

使用方法：<Welcome name="frank"/>

类组件

class Welcome extends React.Component{
  render(){
    return <h1>hello,{this.props.name}</h1>
  }
}

使用方法和类组件一样

<Welcome/>会被翻译成React.createElement(Welcome)
React.createElement的逻辑

  • 传入一个字符串"div"，则创建一个div（虚拟DOM）
  • 传入一个函数，则会调用该函数，获取返回值
  • 传入一个类，则在类前面加个new（这会导致constructor执行），获取一个组件对象，然后调用对象的render方法，获取其返回值

试着去使用两种组件

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      爸爸
      <Son />
    </div>
  );
}

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0
    };
  }

  add() {
    this.setState({n:this.state.n + 1});//()里面是新的对象
  }
  render(){
    return (
      <div>
        儿子n:{this.state.n}
        <button onClick={()=>this.add()}>+1</button>
        <Grandson />
      </div>
    );
  }
}

const Grandson = () => {
  const [n, setN] = React.useState(0);
  return (
    <div>
      孙子n:{n}
      <button onClick={()=>setN(n+1)}>+1</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

setN是得到新的n

内部数据和外部数据的使用
外部数据props

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      爸爸
      <Son messageForSon="儿子你好" />
    </div>
  );
}

class Son extends React.Component {
  render() {
    return (
      <div>
        我是儿子，我爸对我说:{this.props.messageForSon}
        <Grandson messageForGrandson="孙贼你好" />
      </div>
    );
  }
}

const Grandson = props => {
  return (
    <div>
      我是孙子，我爸对我说:{props.messageForGrandson}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

内部数据state

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      爸爸
      <Son />
    </div>
  );
}

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0
    };
  }//数据初始化
  add() {
    this.setState({n:this.state.n + 1});
  }//写数据，()里面是新对象,要改变数据就要产生新的对象
  render() {
    return (
      <div>
        儿子n:{this.state.n}//读数据
        <button onClick={()=>this.add()}>+1</button>
        <Grandson />
      </div>
    );
  }
}

const Grandson = () => {
  const [n,setN] = React.useState(0);
  return (
    <div>
      孙子n:{n}//读数据
      <button onClick={()=>setN(n+1)}>+1</button>//setN是写数据
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

类组件中
setState里面最好写函数

add(){
  this.setState((state)=> {
    return {n:state.n+1}
  });
}

因为setState是异步的，如果后面还有代码使用了this.state.n，那么就会出问题。
写函数就可以在函数中使用最新的this.state.n，你就是很清楚新n和旧n，避免异步造成的错误

函数组件中
setN不会改变n
类组件中的setState会等一会儿改变n

总结

外部数据

  • 类组件直接读取属性this.props.xxx
  • 函数组件直接读取参数props.xxx
    内部数据
  • 类组件用this.stat读,this.setState写
  • 函数组件用useState返回数组，第一项读，第二项写

类组件到的注意事项

this.state.n+=1有用吗？

  • n已经变了，没有触发UI更新
  • 调用setState才会触发UI更新（异步更新）
  • 因为React没有像Vue监听data一样监听state
    setState推荐写法
  • setState之后，state不会立马改变，立马读取state会失败
  • setState(函数)
  • React希望我们不要修改旧state(不可变数据)
  • 常用代码：setState({n:state.n+1})

函数组件注意事项

  • 也要通过setX(新值)来更新UI
  • 没有this，一律用参数和变量

Vue和React

  • Vue就是监听数据变化，然后更新UI
  • React不能修改之前的数据，只能创建一个新的数据，通过diff找到不同，局部更新UI
    在这里插入图片描述

复杂的state

如果state里面有不止有一个值，有多个的时候
类组件：

this.state = {
  n: 0,
  m: 0
};
addN(){
  this.setState({n: this.state.n + 1});
}

要改变n的值，就像上面这样写就行，但是m呢，上面并没有把没有变化的m赋值过去，
上面的写法可以看成this.setState({...this.state, n: this.state.n+1});，自动把没有变化的值赋值给新的对象

函数组件：

const Grandson = () => {
  const [n, setN] = React.useState(0);
  const [m, setM] = React.useState(0);
  return (
    <div>
      孙子n:{n}
      <button onClick={() => setN(n+1)}>n+1</button>
      m:{m}
      <button onClick={() => setM(m+1)}>m+1</button>
    </div>
  );
};

这样改变一个值也不会把另外的变为undefined
下面是不推荐写法，就会把另外的变为undefined

const Grandson = () => {
  const [state, setState] = React.useState({
    n: 0, m:0
  });

  return (
    <div>
      孙子n:{state.n}
      <button onClick={() => setState({n:state.n+1})}>n+1</button>
      m:{state.m}
      <button onClick={() => setState({m:state.m+1})}>m+1</button>
    </div>
  );
};

点了n+1后m直接没了
<button onClick={() => setState({...state, n:state.n+1})}>n+1</button>就必须这样写
注意
类组件的setState会自动合并，函数组件的setState不会自动合并，并且只会自动合并第一层。

this.state = {
  n: 0,
  m: 0,
  user: {
    name: "frank",
    age: 18
  }
}
render(){
  return (
    <div>
      <div>user.name: {this.state.user.name}</div>
      <div>user.age: {this.state.user.age}</div>
      <button onClick={() => this.changeUser()}>change user</div>
    </div>
  )
}
changeUser(){
  this.setState({
    user: {
      name: "jack"
    }
  });
}

上面的代码，点击change user按钮，名字被改变，然后age就没了，因为指挥自动合并第一层。
改成

changeUser(){
  this.setState({
    user: {
      ...this.state.user,
      name: "jack"
    }
  });
}

这样把之前的值赋值回来的写法即可

也可以用Object.assign()
const user = Object.assign({}, this.state.user);
上面的写法等价于
const user = {...this.state.user};
Object.assign(参数1,参数2)就是把参数2的值拷贝给参数1，然后赋值给user

函数组件则是完全不会帮你合并
全都要你自己去合并

事件绑定

有下面的写法

  • <button onClick={()=>this.addN()}>n+1</button>
    上面的这种写法最安全

  • <button onClick={this.addN}>n+1</button>
    有问题，这样会使的this.addN中addN里面的this变成window，因为在调用这个函数的时候，是用onClick调用的
    相当于button.onClick.call(null,event)，this是空，所以this指向window
    在addN函数里面调用this.state时就会出问题，因为值个this没有指向这个react实例，所以会出问题

  • <button onClick={this.addN.bind(this)}>n+1</button>
    用bind给this绑定为react实例，可以

下面的写法用this._add = () => this.addN()

  • <button onClick={this._addN}>n+1</button>
    就可以愉快的使用了

上面的写法多多少少有点不够优雅
看下面的
把addN变成了箭头函数

constructor(){
  this.addN = ()=>this.setState({n:this.state.n+1})
  render(){
    return <button onClick={this.addN}>n+1</button>
  }
}

就不用在constructor外面写方法了

来看看一看怎么变过去的

最开始是下面的写法

constructor(){
  this._addN = ()=> this.addN()
  render(){
    return <button onClick={this.addN}>n+1</button>
  }
}
addN() {
  this.setState({n: this.state.n + 1});
}

最终得到了一个终极写法
去掉this然后把剩下的写在constructor外面

this.addN = () => this.set....箭头函数是挂在this对象上面的
addN(){}和addN: function(){}都是正常的函数写法，会挂在原型上面

看下面的写法

class Person{
  sayHi(){}
}
class Person2{
  sayHi2 = ()=>{}
}

两种不同的写法

  • 第一种的sayHi在原型上，
  • 第二种sayHi在实例本身身上
    最好用第二种写法，方法都在自己身上

this

  • 所有函数的this都是参数，由调用决定，所以可变
  • 箭头函数的this不可变，箭头函数不接受this

React VS Vue

相同点

  • 都是对视图的封装，React使用组件和类表示一个组件，Vue是通过构造选项构造一个组件
  • 都提供了createElement的XML简写，React提供的是JSX语法，Vue提供的是模板写法（语法巨多）

不同点

  • React是All in js（HTML in js）
  • Vue是js放在HTML里写（js in html）
React入门--第三天--Class组件
weixin_44809439的博客
11-14 192
Class组件 创建方式 props和state 生命周期 两种创建Class组件的方式 ES5方式（过时） import React from 'react'; const A = React.createClass({ render() { return ( <div>hi</div> ) } }) export default A 由于ES5不支持class，才会有这种方式 ES6方式 import React from 'reac
React入门--第四天--useRef/useContext
weixin_44809439的博客
11-15 460
useRef/useContext 先看一个bug import React from "react"; import ReactDOM from "react-dom"; const rootElement = document.getElementById("root"); function App() { const [n, setN] = React.useState(0); const log = () => setTimeout(() => console.log(`n:
一文读透react精髓
xiaofeng123aazz的博客
10-31 129
一个JSX语法的示例，如下所示< / h1 >;这种语法形式，既不是HTML，也不是字符串，而是称之为JSX，是React里用来描述UI和样式的语法，JSX最终会被编译为合法的JS语句调用（编译器在遇到{时采用JS语法进行解析，遇到
【前端学习笔记】React之组件和React.Component
你好呀，欢迎你的到来。
06-26 1192
函数式组件： function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 类组件： class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1&gt...
【React基础】4个注意事项！！class关键字定义React组件
Milk~每天分享一点点，技术进步一点点
08-07 297
定义 React 组件 class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } 声明默认属性 无论是函数组件还是 class 组件，都拥有 defaultProps 属性： class Greeting extends React.Component { // ... } Greeting.defaultProps = {
React class & function component 的区别
日常编码
03-27 542
学习react之理解 React class & function component区别 本文参考自 https://www.cnblogs.com/chrissong/p/10445191.html function component function Welcome(props) { return <h1>Hello, {props.name}</h1&g...
React学习（四）：元素渲染&组件
Allen_6的博客
10-24 1639
目录元素渲染组件 元素渲染 组件
react入门（第二天）
weixin_44761131的博客
07-28 249
react定义两种组件和state
【React】入门第二天 - jsx
LaoShiRen的博客
03-09 233
jsx 今天开始学习jsx 什么是jsx React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。 基本语法...
React Native基础入门教程 - 第1天学习指南
虽然具体的课程内容无法从标题和描述中直接得知，但根据课程名称“44课 ReactNative第1天（2018.10.20）”可以推断，课程可能是针对React Native的入门教学，重点关注基础概念和环境搭建。课程可能涵盖了React ...
react-native 入门学习指南
snake_son的博客
01-10 1616
本篇汇集了React从入门到精通的各种技术，是你学习RN的指南 。本指南汇集React-Native各类学习资源，给大家提供便利。指南正在不断的更新，大家有好的资源欢迎Pull Requests！同时还有Awesome React Native系列 https://github.com/jondot/awesome-react-native目录教程React NativeReact.jsES6系列教
进击ReactNative-徐如林-React源码解析
11-15 1412
目录定目标传道（攻坚方法论）授业（懂算法）解惑（考考你）组件生命周期数据结构Virtual DOMDiff算法原理追过程学习运行（Playground）源码迷航微光大海航术用户态（浅水区）组件API生命周期内核态（深水区）初始渲染时间线用户点击渲染时间线小结简约伪代码方法调用图拿结果QA高性能实践问题定位利器方法钩子长歌结语参考 有的人可能会不理解，大前端平台化的战火为谁而燃，吾辈何以为战？专注于移动互联网大前端致富，一直是我们最崇高的理想，而ReactNative是横亘在中间的桥头堡。纵观行业风向，有作
React-Native安装配置环境搭建（夜神模拟器中运行）
Mini_小仙女的博客
07-21 1162
React-Native环境搭建 一.安装JAVA JDK Java和React Native没有直接关系.他们是两个不同的东西. React Native允许您仅使用JavaScript构建移动应用程序.它可以让您为Android设备构建移动应用程序。Android设备使用基于Java平台的SDK。所以我们先下载java jdk 1.首先去官网下载JDK： JAVA JDK下载（注意，下载时需要登录Oracle账号，这个不需要用自己邮箱去注册，注册了也不能用，直接百度搜索下就能找到能使用的账户和.
React-基础教程完整版
风起叶落，若是不知，岂会心动！
03-21 4029
目录： 1 组件和组件属性（Component and Props） 1.1 组件定义方式 1.2 组件嵌套使用 1.3 提取组件 2 状态和声明周期（State and LifeCycle） 2.1 状态值 2.2 生命周期 3 事件处理 4 条件渲染（Conditional Rendering） 5 列表和键（Lists and Keys） 6 Form 表单 7 状态值提升（Lifting S
ioDraw-v3.1.0-win64.exe，流程图、思维导图、甘特图绘制软件，Windows64位免安装版
11-10
1、ioDraw 是免费的在线作图软件，用于制作流程图、思维导图、甘特图、白板手绘图、mermaid流程图、海报设计、折线图、柱状图、拓扑图、组织结构图、UML、ER和时序图、平面设计图、电子电路图等，无需注册即可使用 2、替代Visio的免费软件，无使用限制 3、适合程序员、白领、系统架构师、项目经理、平面设计师、产品经理使用 4、v3.1.0变更日志： 新增将文件保存到百度网盘。 修复第三方平台文件列表页显示问题。
基于Java+SpringBoot+Vue的高校心理健康评测与服务系统答辩PPT.pptx
最新发布
11-10
基于Java+SpringBoot+Vue的高校心理健康评测与服务系统答辩PPT.pptx
【光学】基于matlab BP神经网络光纤光栅应变传感器温度补偿【Matlab仿真 8783期】.zip
11-10
【光学】基于matlab BP神经网络光纤光栅应变传感器温度补偿【Matlab仿真 8783期】.zip
易支付完美级别运营已对接小微商户带视频教程
11-10
搭建非常简单真实可用 完美级别运营首选 已去授权已对接微信小微商户接口 支持扫码 jsapi 小程序 php 扩展安装:sg11 对接易通商户 需要开启PHP7.0以上 已全部开源
智能车未来趋势解析：技术进展、挑战及发展路径
11-10
内容概要：该文综述了21世纪智能车技术的发展现状及其面临的关键挑战。首先概述了智能车的基础技术构成，包括自动驾驶技术、车联网技术和智能座舱等组成部分。随后详细讨论了智能车技术实现的重要步骤：感知系统的开发、决策与控制的设计及系统的集成测试过程。此外，文中还指出了技术、法规及社会三个方面的主要挑战，并提出相应的发展策略建议。全文旨在探索未来智能车发展方向。 适用人群：对智能车技术及其应用感兴趣的汽车行业专业人员、技术研发人员及政策研究人士等。 使用场景及目标：适合用于了解智能车领域最新发展趋势和技术壁垒，辅助企业技术创新、产品规划及政府制定相关政策。 其他说明：本文对于希望把握智能车未来发展脉络，参与或者推动该领域进步的相关群体有着重要的指导意义。
iOS开发新手React-Native入门教程
资源摘要信息:"该资源是一个关于如何使用React-Native框架为iOS平台开发应用的教程。React-Native是一个由Facebook开发的开源框架，允许开发者使用JavaScript和React来构建原生移动应用。教程中的应用是一个电影列表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值