React 类组件和函数组件

最新推荐文章于 2024-03-23 19:17:19 发布
最新推荐文章于 2024-03-23 19:17:19 发布
阅读量1.2k 收藏 19
点赞数 24
分类专栏： 程序员 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68271787/article/details/135463964
版权

组件component

一.概念

Element VS Component (元素与组件)

//不成文的约定:元素小写，组件大写
const div=React.createElement('div',...)
这是一个React元素(小写)
const Div=()=>React.createElement('div',...) 
这是一个React组件(大写)

什么是组件?

能跟其他物件组合起来的物件，就是组件，组件并没有明确的定义。 就目前而言，一个返回值是React元素的函数就是组件

Vue里，data、methods、render组合成的一个对象(构造选项)就可以表示一个组件

React两种组件

1.函数组件

function Welcome(props){
  return <h1>Hello,{props.name}</h1>
}
使用方法: <Welcome name="frank"/>

2.类组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}
使用方法: <Welcome name="frank"/>

<Welcome />会被翻译成什么？

<div />翻译为React.createElement('div') div是元素 <Welcome />翻译为React.createElement(Welcome) Welcome是函数

工具: babel online把标签翻译成JS

React.createElement的逻辑

React.createElement目前接收几种参数:

1.如果传入一个字符串'div',则会创建一个div(虚拟DOM元素)

2.如果传入一个函数,则会调用该函数，获取其返回值

3.如果传入一个类,则在类前面加个new(这会导致执行 constructor),获取一个组件对象，然后调用对象的render方法，获取其返回值

class Welcome extends React.Component{ 
  constructor(){
    super()
    this.state={n:0}
  }
  render(){
    return <div>hi</div>
  }
}
使用类
new Welcome()

二.使用React的2种组件

React2种组件的书写方式: class类组件和function函数组件。

例子

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

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

class Son extends React.Component { 
  constructor() { 
    super(); 
    this.state = { 
      n: 0
    };
  }
  add() {
    // this.state.n += 1 为什么不行
    this.setState({ n: this.state.n + 1 }); 
  }
  render() {
    return ( 
      <div className="Son">
        儿子 n: {this.state.n}
        <button onClick={() => this.add()}>+1</button> 
        <Grandson />
      </div>
    );
  }
}

const Grandson = () => {
//声明一个state初始值为0,用n代表0，用setN对0进行修改，每次setN时都会得到一个新的n(不是改变原有的n)
  const [n, setN] = React.useState(0); //析构写法
  return (
    <div className="Grandson">
      孙子 n:{n}
      <button onClick={() => setN(n + 1)}>+1</button>
    </div>
  );
};

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

如何使用 props(外部数据)？

类组件和函数组件使用 props:

类组件直接读取属性this.props.xxx

函数组件直接读取参数props.xxx

外部数据props不能写，只能读。

一.class类组件添加外部数据props

1' 传字符串

传: 接收方添加messageForSon="字符串"

接收: {this.props.messageForSon}

2' 传变量

传: 接收方添加messageForSon={1+1}

接收: {this.props.messageForSon}

例子:爸爸传props给Son

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

二.函数组件

同样的，要么使用""表示字符串，要么使用{}表示JS的表达式。

1' 传字符串

传: 接收方添加messageForGrandson="字符串"

接收: 需要传一个参数props 和 接收{props.messageForGrandson}

React会自动把messageForGrandson="字符串"变成一个对象然后放到第一个参数props里，props可自定义,叫x也行，一般叫props。

2' 传变量

传: 接收方添加messageForGrandson={a}

接收: {props.messageForGrandson}

例子:儿子传props给Grandson

class Son extends React.Component {
  render() {
    var a=10
    return (
      <div className="Son">
        我是儿子，我爸对我说「{this.props.messageForSon}」
        <Grandson messageForGrandson="孙贼你好" /> 
      //<Grandson messageForGrandson={a} /> 添加messageForGrandson
      </div>
    );
  }
}
const Grandson = props => { 
  var a=10
  return (
    <div className="Grandson">
      我是孙子，我爸对我说「{props.messageForGrandson}」//接收string或变量
    </div>
  );
};

如何使用 state(内部数据)？

类组件和函数组件使用 state:

类组件用this.state读，this.setState写 函数组件用useState返回数组，第一项读，第二项写

一.类组件如何使用内部数据state？

关注数据时关注它的3个条件：1.如何初始化？2.如何读？3.如何写？

class Son extends React.Component {
  constructor() {
    super();
    this.state = { //1.初始化
      n: 0
    };
  }
  add() {
 // this.state.n += 1 为什么不行？
    this.setState({ n: this.state.n + 1 }); //2.写
  }
  render() {
    return (
      <div className="Son">
        儿子 n: {this.state.n} //3.读
        <button onClick={() => this.add()}>+1</button>
        <Grandson />
      </div>
    );
  }
}

this.state.n += 1为什么不行？

因为Vue会监听n,而React根本不会监听n,所以就算n变化了React也不知道.

那怎么才能通知React我修改了数据呢？

用setState。 数据不可变的思维:不要改变以前的对象，要改的话你就产生一个新的对象。React理念就是数据不可变，你如果要改变就产生一个新的对象，新的对象去容纳新的东西，然后传给setState。

add() {
  //this.state.n +=1
  //this.setState(this.state); 
  //这种虽然也生效但不要用，违反了数据不可变的思维
    this.setState({ n: this.state.n + 1 }); 
  }

这就是在类组件里，如何使用state:

1.在constructor的super下面进行初始化

2.读的时候用this.state.n

3.写的时候用this.setState,最好用一个新的对象，而不是在原有的对象上修改。

牛X的前端用setState(函数)，他一般会写成一个函数。

add() {
  //this.setState({ n: this.state.n + 1 }); 
  //console.log(this.state.n) 
  //打印出0,setState不会马上改变n的值，而是等一会console执行完后才去覆盖n的值。
  //所以说，setState是异步的更新UI的过程，不会立即执行而是过一会执行，新手不理解易bug,老手为了避开这个问题这样写,避免混淆新的、旧的state。
    this.setState( state => { //旧的n
      const n=state.n+1
      console.log(n)
      return { n } //新的n
      }
    )  
  }

这种写法能更好的理解旧state、新state，而且不容易出错，避免异步造成的误解。 使用state时注意一个事情，setState不会马上改state，最好使用函数去读新的值，它会让你更容易区分新旧state。

二.函数组件如何使用内部数据state？

关注数据时关注它的3个条件：1.如何初始化？2.如何读？3.如何写？

const Grandson = () => {
  const [n, setN] = React.useState(0); //1.初始值
  //你返回的这个数组的第1项就是用来读的，第2项就是用来写的。一个读接口一个写接口，就2项。名字可写但一般就叫n、setN。
  return (
    <div className="Grandson">
      孙子 n:{n} //2.读
      <button onClick={() => setN(n + 1)}>+1</button> 
    //3.写,setN永远不会改变n,它会产生一个新的n。
    </div>
  );
};

类组件的setState会等一会再改变state，函数组件的setN永远都不会改变n。

函数组件注意事项

1.跟类组件类似的地方

也要通过setX(新值)来更新UI

2.跟类组件不同的地方

没有this,一律用参数和变量，搞不懂this的就可以用函数组件。

Vue 对比 React

两种编程模型

Vue: 我对数据的修改会直接映射到UI上。Vue监听了n的变化，当n变化时，Vue就把n出现的地方全部都变一遍。

React: 一开始给我个state{n:0},我把这个state变成一个UI。 如果你想改变n,要注意不能修改之前的n。应该直接新建一个新的对象，对应一个新的UI。

React就会将这2个UI进行对比(DOM diff)区别，然后进行局部更新。

复杂 state 怎么处理

所谓复杂就是state是个对象，如果state是个复杂的对象怎么办？

如果state里不止有n怎么办？

一.类组件里有n和m

1.类组件的setState会自动合并第一层属性:

当类组件里有n和m时，setState时可以只setState一部分，因为它会自动延用之前的属性。

2.类组件的setState不会合并第二层属性。

二.函数组件里有n和m

函数组件的setState不会自动合并，当多个setState放一起时要记得用...操作符把之前的复制过来。函数组件的setState完全不会帮你自动合并，不管你是第一层还是第二层，要合并只能自己用...操作符。

一.类组件里有n和m

1.类组件的setState会自动合并第一层属性

例子

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

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
      m: 0
    };
  }
  addN() {
    this.setState({ n: this.state.n + 1 });
    // m 会被覆盖为 undefined 吗？
  }
  addM() {
    this.setState({ m: this.state.m + 1 });
    // n 会被覆盖为 undefined 吗？
  }
  render() {
    return (
      <div className="Son">
        儿子 n: {this.state.n}
        <button onClick={() => this.addN()}>n+1</button>
        m: {this.state.m}
        <button onClick={() => this.addM()}>m+1</button>
        <Grandson />
      </div>
    );
  }
}

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

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

总结:类组件里的setState,如果你对其中一部分进行修改那么其他的部分会自动延用上一次的值，而不会被undefined覆盖。

addN() {
    this.setState({ n: this.state.n + 1 });
/*相当于写
  this.setState({...this.state, n: this.state.n + 1 });
  当只设置n时，m会自动延用上一次的值，m不会被覆盖为undefined
  React会自动帮你写`...this.state`:把之前所有值拷过来再将n变成n+1
*/
  }

2.类组件的setState不会合并第二层属性

类组件的setState会自动合并第一层属性，但是不会合并第二层属性。

解决方法: 使用Object.assign或者...操作符，二选一。

1' 使用...操作符(推荐)

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0, //第1层，设置n时不要管m
      m: 0,
      user: {
        name: "frank", //第2层，设置name时必须管age
        age: 18
      }
    };
  }
  ...
  changeUser() {
    this.setState({
    //m和n不会被置空
      user: {
        ...this.state.user, //防止age被置空的解决方法
        name: "jack"
      //坑:age会被置空，解决方法:`...this.state.user`
      }
    });
  }
  render() {
    return (
      <div className="Son">
        儿子 n: {this.state.n}
        <button onClick={() => this.addN()}>n+1</button>
        m: {this.state.m}
        <button onClick={() => this.addM()}>m+1</button>
        <hr />
        <div>user.name: {this.state.user.name}</div>
        <div>user.age: {this.state.user.age}</div>
        <button onClick={() => this.changeUser()}>change user</button>
        <Grandson />
      </div>
    );
  }
}

...操作法是React经常会用到的技巧

2' 使用Object.assign

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
      m: 0,
      user: {
        name: "frank",
        age: 18
      }
    };
  }
  changeUser() {
  //Object.assign把之前user的所有属性复制到新对象上
    const user = Object.assign({}, this.state.user); 
  //等价于const user={...this.state.user}
    user.name = "jack";
    this.setState({
      // m 和 n 不会被置空
      user: user
    });
  }
  render() {
    return (
      <div className="Son">
        儿子 n: {this.state.n}
        <button onClick={() => this.addN()}>n+1</button>
        m: {this.state.m}
        <button onClick={() => this.addM()}>m+1</button>
        <hr />
        <div>user.name: {this.state.user.name}</div>
        <div>user.age: {this.state.user.age}</div>
        <button onClick={() => this.changeUser()}>change user</button>
        <Grandson />
      </div>
    );
  }
}

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

二.函数组件里有n和m

同样的需求下，用函数组件更简便，类组件已经过时了，尽量用函数组件。 例子

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

函数组件另一种不推荐的写法，你会发现m被质空:

//不要这样写，当你setState`n`时，`m`就会`undefined`.
const Grandson = () => {
  const [state, setState] = React.useState({
    n:0,m:0
  });
  return (
    <div className="Grandson">
      孙子 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>
  );
};

如果你要用函数组件的setState就不要搞个对象在这里。如果你非要弄个对象那每次赋值时要记得先拷贝之前的。

//第2种写法
const Grandson = () => {
  const [state, setState] = React.useState({
    n:0,m:0
  });
  return (
    <div className="Grandson">
      孙子 n:{state.n}
      <button onClick={() => setState({...state,n:state.n + 1})}>n+1</button>
      m:{state.m}
      <button onClick={() => setState({...state,m:state.m + 1})}>m+1</button>
    </div>
  );
};

总结: 类组件会自动合并第1层，不会合并第2层。函数组件不会自动合并。所以不要依赖自动合并。

事件绑定

React组件里事件绑定的各种写法:onClick,onKeyPress...

一.类组件的事件绑定

<button onClick={()=>this.addN()}>

示例

//最终写法:这种写法this不会变成window
class Son extends React.Component {
  addN=()=> this.setState({n:this.state.n+1}) //绑定
//上面的写法是下面的语法糖,2种写法完全等价
//constructor(){
//  this.addN = () => this.setState({n:this.state.n+1})
//}
  render(){
    <button onClick={this.addN()}> //使用
  }
}

constructor里的thisthis.addN 指的是当前对象。 这种写法函数会被定义到对象本身身上，这意味着每个Son组件都有自己的addN,如果有两个Son,就有2个addN。

//补充
//1.箭头函数上的this是不会变的，因为箭头函数不支持this
addN=()=>{this.setState({n:this.state.n+1})}

//2.constructor里的this`this.addN `指的是当前对象Son。
class Son extends React.Component {
  constructor(){
    this.addN = () => this.setState({n:this.state.n+1})
  }
}

复习this

1.this的值到底是什么？给this定性

2.你怎么还没搞懂this? 如何确定this

3.JS里为什么会有this? 为什么要设计this

为什么this会变/不会变？

所有函数的this都是参数，由调用决定，所以可变

唯独箭头函数的this不变，因为箭头函数不接受this

React的特点:能不做的，我都不做。

Vue的特点:能帮你做的，都帮你做了。

this面试题1

this面试题2

总结

React是面向类和函数，Vue更像是面向对象。

React提供的是JSX语法(2点):

1.普通属性用标签

2.非普通属性也就是跟JS相关的，都写在{}里。

{}之外都是标签，{}之内是JS。

面试题

React与Vue的区别？

相同点

1.都是对视图的封装，React是用类和函数表示一个组件，而Vue是通过构造选项构造一个组件。

2.都提供了createElement的XML简写，React提供的是JSX语法，而Vue是提供的是template模版写法(语法巨多)

不同点

React是把HTML放在JS里写(HTML in JS),而Vue是把JS放在HTML里写(JS in HTML)

秋の本名
关注
  • 24
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React——函数组件与类组件
weixin_68160847的博客
01-12 1453
函数组件也称无状态组件，顾名思义就是以函数形态存在的 React 组件。 在 hooks 出现之前，react 中的函数组件通常只考虑负责UI的渲染，没有自身的状态，没有业务逻辑代码，是一个纯函数。下面这个函数组件就是一个纯函数，它的输出只由参数props决定，不受其他任何因素影响。
React 组件学习（函数组件、 类组件）
m0_62118859的博客
04-25 4296
目录 1. React 组件介绍 2. 函数组件 1）什么是函数组件？ 2）定义函数组件 3）使用组件 总结： 3. 类组件-复习 class 语法 1.掌握 class 定义类，定义属性，定义函数 2.掌握 extends 继承父类 4. 类组件-基本使用步骤 1.什么是类组件？ 2.定义类组件 3.使用类组件 总结： 5. 类组件-组件抽离 6. 类组件-无状态组件和有状态组件和 1.无状态组件 2.有状态组件 3.它们的区别 4.如何去选择 ...
React中 类组件 与 函数组件 的区别
最新发布
fighting ~的博客
03-23 981
默认情况下，自定义组件不会暴露它们内部 DOM 节点的 ref。像这样将自定义子组件包装在。
【React】函数式组件与类组件的不同
南栀的博客
03-28 1896
函数组件与类组件的区别
react中的函数式组件和类式组件
jieyucx的博客
10-26 940
{/* 内容 */}
React中的类组件和函数组件（详解）
m0_52900946的博客
09-07 1364
React的核心思想就是组件化，相对于Vue来说，React的组件化更加灵活和多样。
react-react面试题之对类组件和函数组件的理解.zip
03-20
react面试题 react_react面试题之对类组件和函数组件的理解
React用于React组件CSS构造函数-React开发
05-27
每个React组件都有一个用于功能逻辑的内置javascript构造函数。 介绍CSS构造函数的样式！ 从'react'导入React； 从'css-constructor'导入css； //吗？ 每个React组件都有一个用于功能逻辑的内置javascript构造函数。...
ReactUI:函数式ReactUI组件库
03-15
ReactUI 运行生成文档脚本 sh doc.sh ...│ ├── Icon // icon组件 │ ├── Layout │ ├── styles │ ├── utils │ ├── index.d.ts │ └── index.tsx ├── test // 测试配置 │ ├── __mocks__
浅谈React中组件逻辑复用的那些事儿
11-20
那么 React 是怎么复用组件逻辑的呢？本文将一一介绍 React 复用组件逻辑的几种方法，希望你读完之后能够有所收获。如果你对这些内容已经非常清楚，那么略过本文即可。 我已尽量对文中的代码和内容进行了校验，但是...
react-dataminrreactcomponents可复用React组件和常用函数集合
08-14
dataminr-react-components - 可复用React组件和常用函数集合
React学习——函数式组件和类组件
m0_62353117的博客
04-22 487
在React中，组件可以使用函数式组件和类组件两种方式来定义。
react之函数组件、类组件
Westrate_WT的博客
01-20 1411
函数组件是函数式编程，通过接收一个props对象返回一个react元素，特点是不可变的、引用透明且没有副作用等​// )//}​​类组件是面向对象编程，主要是继承和生命周期等核心概念，但面向对象编程将属性和方法封装起来，屏蔽了很多细节，不利于测试，而且react的设计思路更推崇组合，而不是继承，因此在类组件中大量使用继承会造成组件过重，功能难以拆分​render(){return (​data:{},render() {return (<div>
React函数组件和类组件的区别
热门推荐
前端精髓
06-08 2万+
定义组件有两个要求： 组件名称必须以大写字母开头 组件的返回值只能有一个根元素 函数组件 function Welcome (props) { return <h1>Welcome {props.name}</h1> } ReactDOM.render(<Welcome name='react' />, document.getElementById(...
【React 进阶】函数组件 和 类组件 详解区分
XH_jing的博客
04-15 7395
时隔一年半之久再次重新学习 React，好多都还是原来的样子，这次我要重新开启 React 的大门，希望各位小伙伴可以一起讨论学习呦～ 前言 今天我们开启第三个专题：React 中函数组件和类组件的区别。 一、函数组件 和 类组件 1. 函数组件 函数组件也称无状态组件，顾名思义就是以函数形态存在的 React 组件。 在 hooks 出现之前，react 中的函数组件通常只考虑负责UI的渲染，没有自身的状态，没有业务逻辑代码，是一个纯函数。下面这个函数组件就是一个纯函数，它的输出只由参数props.
React中函数组件和类组件
m0_72694993的博客
08-20 720
1.在渲染组件时，会将所有绑定的属性 解析出来，并存储在一个object对象上，object对象返回传递给类组件的类的实例对象上的props属性上（例：如下代码。1.在渲染组件时，会将所有绑定的属性 解析出来，并存储在一个object对象上，之后调用组件函数时，上面得到的对象会作为参数传入进去（例：如下代码。1）为了区分普通函数还是组件，通过组件函数的名字，使用 PascalCase命名方式，其他函数使用camelCase命名方式。2）组件函数必须有返回值，返回组件呈现的最终效果。一、函数组件的使用方法。
【译】 React官方：函数组件与类组件的差异 ？
weixin_34259232的博客
03-25 934
话外：随着 react 新特性 HOOKS 的提出，最新很多人开始讨论 react 里面的函数组件和 class 组件到底有什么不同？这里是 Dan Abramov 的一篇文章 How Are Function Components Different From Classes, 下面是对这篇文章的翻译，大致意思大致表达出来了，不足的地方，请大家多多指教 ：） React 函数组件和 Reac...
react类组件和函数组件
03-29
React组件是React应用程序的基本构建块。React组件可以分为两类：类组件和函数组件。 类组件是React中最常见的组件类型，它们是用ES6类语法编写的。类组件具有状态和生命周期方法，可以使用this关键字来访问组件的属性和方法。类组件通常用于构建复杂的组件，因为它们可以处理一些需要状态管理和生命周期管理的复杂逻辑。 函数组件是React中另一种常见的组件类型，它们是用函数语法编写的。函数组件通常比类组件更简单，因为它们没有状态或生命周期方法。函数组件通常用于构建简单的组件，例如按钮或标签。 在React 16.8版本之前，函数组件只能是无状态的，也就是说它们不能存储任何状态。但是，React 16.8版本引入了Hooks，它允许函数组件管理状态和使用生命周期方法，使它们更加灵活和强大。现在，函数组件可以处理更复杂的逻辑，而不需要使用类组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值