React学习笔记：组件

最新推荐文章于 2024-07-05 11:08:33 发布
最新推荐文章于 2024-07-05 11:08:33 发布
阅读量738 收藏
点赞数
分类专栏： # React相关 文章标签： react.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46015333/article/details/128161453
版权

组件

将页面按照界面功能进行拆分，每一块界面都拥有自己的独立逻辑（组件），这样可以提高项目代码的可维护性和复用性。
在这里插入图片描述
如上图所示将这个卡片分为三个组件，那么当需要添加一个这样的卡片时，就可以复用这些组件，只需要稍稍改变一下这些组件的文字和一些参数就好了，大大提高了代码的复用性，并且若后期维护需要改变样式那么只需要改变对应组件的样式，所有的卡片的样式都会改变，大大提高了项目的可维护性。

类组件

使用class语法创建的组件就是类组件

  • 类名首字母必需大写。 类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
  • 必须继承React.Component父类
  • 必需有render函数，返回 UI 结构，无渲染可返回 null
  • 如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
  • 类中所定义的方法，都放在了类的原型对象上，供实例去使用。
<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 类组件
    class Head extends React.Component {
      render() {
        return (
          <div>
            这是组件
          </div>
        )
      }
    }
    // 根组件
    class App extends React.Component {
      render() {
        return (
          <div>
            <Head />
            <div style={{ height: 200, backgroundColor: 'red' }}>body</div>
          </div>
        );
      }
    }
    // 渲染虚拟dom
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>

注意

  • render 是放在 MyComponent 的原型对象上，供实例使用。
  • render 中的 this 是 MyComponent 的实例对象 <=> MyComponent组件实例对象。

执行了 ReactDOM.render(<MyComponent/>....... 之后，发生了什么？

  1. React解析组件标签，找到了MyComponent组件。
  2. 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
  3. 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

上面的这种把所有组件写在一个文件中会导致后期维护很麻烦，所以我们可以把每个组件单独的写在一个文件中，需要使用哪个组件就引入哪个组件。

状态

根据组件是否有状态可以将组件分为有状态组件和无状态组件。

  • 无状态组件：组件本身不定义状态，没有组件生命周期，只负责 UI 渲染。
  • 有状态组件：组件本身有独立数据，拥有组件生命周期，存在交互行为。

对比两种组件
无状态组件由于没有维护状态只做渲染，性能较好。有状态组件提供数据和生命周期，能力更强。

state

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)，组件被称为"状态机"。使用state的时候通过this去访问即可，例如：this.state.xxx。下面的 Head 组件是有状态组件，Body 是无状态组件。

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 类组件
    class Head extends React.Component {
      state = {
        name: '孤城浪人',
        age: 18
      }
      render() {
        return (
          <div>
            姓名：{this.state.name}<br />
            年龄：{this.state.age}
          </div>
        )
      }
    }
    class Body extends React.Component {
      render() {
        return (
          <div>
            body
          </div>
        )
      }
    }
    // 根组件
    class App extends React.Component {
      render() {
        return (
          <div>
            <Head />
            <div style={{ height: 200, backgroundColor: 'red' }}>body</div>
          </div>
        );
      }
    }
    // 渲染虚拟dom
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
setState

状态(state)不可直接更改，状态必须通过 setState 方法进行更新，且更新是一种浅合并（只会合并相同 key 的值），不是替换。

setState 是“异步”的，多次 setState 会合并。
setState 是“异步”的，合并更新调用 setState 时，将要更新的状态对象，放到一个更新队列中暂存起来（没有立即更新）。如果多次调用 setState 更新状态，状态会进行合并，后面覆盖前面等到所有的操作都执行完毕，React 会拿到最终的状态，然后触发组件更新。这么做的目的是为了提升渲染性能。

  • setState 接收一个对象
<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 类组件
    // 根组件
    class App extends React.Component {
      state = {
        count: 0
      }
      addCount = () => {
        this.setState({ count: this.state.count + 2 });
        this.setState({ count: this.state.count + 1 });
      }
      render() {
        return (
          <div>
            <div>
              {this.state.count}
            </div>
            <button onClick={this.addCount}>add</button>
          </div>
        );
      }
    }
    // 渲染虚拟dom
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>

上面的例子中，点击按钮每次加 1，并不是 2，也不是 3 可以证明后面的 setState 覆盖了前边的。

  • setState 接收函数
    如果传给 setState 的是一个函数的话，那么这个函数可以拿到当前的 state。如果传了两个函数的话，那么在数据更新完后会执行第二个参数函数。
<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 类组件
    // 根组件
    class App extends React.Component {
      state = {
        count: 0
      }
      addCount = () => {
        this.setState(preState => preState.count++, () => console.log(this.state));
      }
      render() {
        return (
          <div>
            <div>
              {this.state.count}
            </div>
            <button onClick={this.addCount}>add</button>
          </div>
        );
      }
    }
    // 渲染虚拟dom
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>

受控组件与非受控组件

  • 非受控组件：没有通过 state 控制的表单元素，它自己控制自身的值
  • 受控组件：表单元素的值被 React 中 state 控制，这个表单元素就是受控组件。

下面的例子中 Head 组件中 input 的值由 state.name 决定，所以它是受控组件，而 Body 组件中 input 的值由它自己决定，所以它是非受控组件。

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 类组件
    class Head extends React.Component {
      state = {
        name: '孤城浪人',
        age: 18
      }
      changeName = () => {
        this.setState({ name: '孤城' });
      }
      render() {
        return (
          <div>
            姓名：{this.state.name}<br />
            年龄：{this.state.age}<br />
            <input type="text" value={this.state.name} />
            <button onClick={this.changeName}>changeName</button>
          </div>
        )
      }
    }
    class Body extends React.Component {
      render() {
        return (
          <div>
            <input type="text" />
          </div>
        )
      }
    }
    // 根组件
    class App extends React.Component {
      render() {
        return (
          <div>
            <Head />
          </div>
        );
      }
    }
    // 渲染虚拟dom
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>

函数组件

函数组件就跟他的名字一样是一个函数，如下例子，必须要返回 UI 结构。

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 渲染虚拟dom
    function App() {
      return (
        <div>
          我是 APP 组件
        </div>
      )
    }
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>

状态

在 16.8 版本以前函数组件是没有状态的，16.8 版本推出Hooks API就使得函数组件和类组件的功能性一致了，既有状态，也有了生命周期方法。这里只简单说一下 useState 和 useEffect 两个 API。

  • useState：使用方法如下，让函数组件也有状态，注意： useState 不可以用 if…else
  • useEffect：使用方法如下，当第二个参数为[]时会在组件挂载时就会重新调用第一个参数函数，若第二个参数为[name]，那么每次 name 变化时就会重新调用第一个参数函数。
function App() {
      const [ name, setName ] = useState();
      useEffect(() => {
        setName('孤城浪人');
      }, [])
      return (
        <div>
          姓名：{name}
        </div>
      )
    }

更改状态就调用就调用 useState 方法返回的第二个参数，他是一个函数，将新值作为参数调用就行了。

受控组件

因为函数组件有了状态，那么这里受控组件就和类组件的受控与非受控组件非常相似了。

我是孤城浪人，一名正在前端路上摸爬滚打的菜鸟，欢迎你的关注。

孤城浪人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（五）React 学习笔记：React 路由基础
keinee的博客
10-10 213
React 路由基础 1. React 路由可以有效的管理多个视图（组件）实现 SPA 2. Router 组件包裹整个应用，只需要使用一次 3. Link 组件是入口，Route 组件是出口 4. 通过 props.history 实现编程式导航 5. 默认模糊匹配，添加 exact 变精确匹配 6. React 路由的一切都是组件，可以像思考组件一样思考路由
React学习笔记之高阶组件应用
01-19
是什么 高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。...class Hello extends React.Component { // } 如何实现 属性代理 下面的例子是最简单的一个实现 function hoc(Impo
React 学习笔记：组件通信
weixin_46015333的博客
12-11 523
组件为什么需要通信呢？这是因为组件是独立且封闭的单元，默认情况下，组件只能使用自己的数据，但是多个组件之间不可避免的要共享某些数据，为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。
React 学习笔记：组件生命周期
weixin_46015333的博客
12-08 629
生命周期一个事物从创建到最后消亡经历的过程，在这个过程中会有不同的状态（新生儿、少年···），所以在 16.8 版本以前生命周期只有类组件才有，函数组件是没有这个概念的，因为它没有状态，本文就是总结类组件生命周期。了解生命周期有助于我们理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因。
React 学习笔记：事件处理
weixin_46015333的博客
12-09 703
React 采用 on+ 事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，**原生的事件全是小写 onclick , React 里的事件是驼峰 onClick** 。并且 React 中若想阻止默认事件需要**显示的调用 `e.preventDefault`**，而不是返回 false 。**React 的事件并不是原生事件，而是合成事件**。
React学习笔记：受控与非受控组件
weixin_46831501的博客
03-02 391
受控组件： 什么是受控组件呢？ 在HTML中，表单元素（input、textarea、select）之类的表单元素通常会自己维护state，并根据用户输入的值进行更新。但是在 React 中一些需要改变的值通常都是放在 state 属性中的，并且规定只能通过 setState() 来改变值进行更新，这样将两者结合起来，使得 React 的 state 成为了“唯一的数据源”，并且渲染表单的 React 组件还控制着用户输入过程中表单发生的操作，被 React 以这种方式控制取值的表单输入元素就叫做**“受控
（二）React 学习笔记：React 组件基础
keinee的博客
10-05 197
React 组件基础 1.组件的两种创建方式:函数组件和类组件 2.无状态（函数）组件，负责静态结构展示 3.有状态（类）组件，负责更新 UI，让页面动起来 4.绑定事件注意this指向问题 5.推荐使用受控组件来处理表单
React学习笔记：useCallback与useMemo
weixin_46831501的博客
03-01 1240
在react中，useCallback与useMemo的主要作用在于进行性能的一个优化，这两者要怎么使用呢？另外这两者之间又有什么关系？ 在使用React时，当我们某一个值发生改变时，整个页面都会重新渲染一次，哪怕是一些没有任何变化的组件、函数都会被重新调用、渲染，这就造成了一很大的性能上的浪费，这个时候要想优化我们的页面性能，就需要用到我们的useCallback和useMemo这个两个hook来进行优化了，接下来就会说一下这两者的使用以及他们之间会有什么区别。 useCallback： useCallb
react18 函数组件 学习笔记
Scar_goSky的博客
05-11 1454
rect笔记
react ajax组件,react学习笔记8：组件生命周期钩子函数和ajax
weixin_29215509的博客
08-05 279
搜索热词生命周期我们并不陌生，比如我们在开发页面会写这样代码：window.onload=function(){//code}等待页面加载完成执行代码，同样的react也有类似的生命周期函数：1.测试周期import React from 'react';import ReactDOM from 'react-dom';import './index.css';import registerSer...
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
React学习笔记之条件渲染（一）
01-19
在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍： 条件渲染 可以根据state的值进行组件的条件渲染。例如： function ...
React Native 基础学习笔记.rar
01-28
这个“React Native基础学习笔记”很可能是对这一跨平台开发技术的详细讲解和实践经验的汇总。React Native的核心理念是“Learn once, write anywhere”，即开发者只需掌握一次React的语法和概念，就能在iOS和...
react_后台管理_项目
分享程序相关知识
07-02 385
本项目使用的是 react+ts+scss 技术栈。
响应式ref()和reactive()
最新发布
weixin_44231698的博客
07-05 419
一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。：toRefs与toRef功能一致，但toRefs可以批量转换。：定义响应式对象（基本类型不要用它，要用ref，否则报错）。：将一个响应式对象中的每一个属性，转换为ref对象。：let 响应式对象=reactive(源对象)。：reactive定义的响应式数据是“深层次”的。：一个Proxy的实例对象，简称响应式对象。：let xxx=ref(初始值)。
React@16.x（46）路由v5.x（11）源码（3）- 实现 Router
qq_40147756的博客
07-02 455
实现 Router
React Navigation 和 Expo Router
weixin_43891869的博客
07-03 395
React Navigation 是 React Native 社区最常用的导航库，其具有高度可定制性且性能良好的特性。它提供了一系列导航器（如堆栈导航器、标签导航器、抽屉导航器等），可以满足绝大多数的页面导航需求。Expo Router 是 Expo 官方最新发布的路由库，它是基于 React Navigation 的再次封装，简化了很多基本的操作，比如不再需要每次在页面中显示的调用具体导航器，只需要在应用的入口配置好路由映射表即可。
React+TS 从零开始教程（4）：useEffect
java小白翻身
07-02 813
源码链接：https://pan.quark.cn/s/c6fbc31dcb02上一节，我们已经学会了React的第一个Hook：useState。这一节，我们要学习的是另一个非常重要的Hook：useEffect。Effect在这里，意为副作用？不论是哪一个Hook，都是写在函数里面的，比如上个章节中useEffect，就是写在一个函数中。所以，这个副作用，就是函数的副作用。怎么理解呢？我们知道，函数就是你给我参数，我给你一个确定的返回，这个叫函数。
黑马react学习笔记
09-14
黑马React学习笔记主要包括React组件生命周期和整合ESLint插件的内容。在学习React时，我们首先需要导入React和ReactDOM两个包，并且使用ReactDOM.render()方法将React元素渲染到页面中。在渲染过程中，我们可以使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值