首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入掌握ReactHooks，让你的应用开发如虎添翼

作者：手机用户2502860763 | 来源：互联网 | 2024-10-24 11:57
本文首发于政采云前端团队博客，详细探讨了ReactHooks的核心概念与实用技巧。通过深入解析常见Hooks的使用场景和高级用法，帮助开发者在实际项目中更加灵活高效地运用ReactHooks，提升应用开发效率和代码可维护性。无论是初学者还是有经验的开发者，都能从中获得宝贵的知识和实践经验。

本文首发于政采云前端团队博客&＃xff1a;看完这篇&＃xff0c;你也能把 React Hooks 玩出花

https://www.zoo.team/article/react-hooks




本文中出现的部分名称映射&＃xff1a;
函数式组件  &＃61;> Function Component
类组件 &＃61;> Class Component
工具函数 &＃61;> Util Function
钩子 &＃61;> React Hook
初始值 &＃61;> initialValue

先讲概念

React v16.7.0-alpha 中第一次引入了 Hooks 的概念&＃xff0c;在 v16.8.0 版本被正式发布。React Hooks 在 React 中只是对 React Hook 的概念性的描述&＃xff0c;在开发中我们用到的实际功能都应该叫做 React hook。
React Hook 是一种特殊的函数&＃xff0c;其本质可以是函数式组件&＃xff08;返回 Dom 或 Dom 及 State &＃xff09;&＃xff0c;也可以只是一个工具函数&＃xff08;传入配置项返回封装后的数据处理逻辑&＃xff09;。

再总结

React Hooks 的出现使函数式组件变得焕然一新&＃xff0c;其带来的最大的变化在于给予了函数式组件类似于类组件生命周期的概念&＃xff0c;扩大了函数式组件的应用范围。
目前函数式组件基本用于纯展示组件&＃xff0c;一旦函数式组件耦合有业务逻辑&＃xff0c;就需要通过 Props 的传递&＃xff0c;通过子组件触发父组件方法的方式来实现业务逻辑的传递&＃xff0c;Hooks 的出现使得函数组件也有了自己的状态与业务逻辑&＃xff0c;简单逻辑在自己内部处理即可&＃xff0c;不再需要通过 Props 的传递&＃xff0c;使简单逻辑组件抽离更加方便&＃xff0c;也使使用者无需关心组件内部的逻辑&＃xff0c;只关心 Hooks 组件返回的结果即可。
在我看来&＃xff0c;Hooks 组件的目标并不是取代类组件&＃xff0c;而是增加函数式组件的使用率&＃xff0c;明确通用工具函数与业务工具函数的边界&＃xff0c;鼓励开发者将业务通用的逻辑封装成 React Hooks 而不是工具函数。
之所以把总结放在前面&＃xff0c;是想让大家在看后面的内容时有一个整体的概念去引导大家去思考 React Hooks 具体给函数式组件带来了什么变化。

Hooks 初识

官方提供的钩子

目前官方提供的钩子共分为两种&＃xff0c;分为基本钩子以及拓展钩子
基本钩子共有&＃xff1a;
useState 、useEffect 、 useContext
额外的钩子有&＃xff1a;

useRef 、useCallback 、useMemo 、

useReducer 、useLayoutEffect 、

useImperativeHandle 、useDebugValue

不同钩子用法

useState
该钩子用于创建一个新的状态&＃xff0c;参数为一个固定的值或者一个有返回值的方法。钩子执行后的结果为一个数组&＃xff0c;分别为生成的状态以及改变该状态的方法&＃xff0c;通过解构赋值的方法拿到对应的值与方法。
使用方法如下&＃xff1a;

export default function HookDemo() {
  const [count, changeCount] &＃61; useState(0);

  return (
    <div>
      {count}
      <button onClick&＃61;{() &＃61;> { changeCount(Math.ceil(Math.random() * 1000)); }}>
        改变count
      button>
    div>
  );
}
640?wx_fmt&＃61;gif

useEffect
顾名思义&＃xff0c;执行副作用钩子。主要用于以下两种情况&＃xff1a;
  1. 函数式组件中不存在传统类组件生命周期的概念&＃xff0c;如果我们需要在一些特定的生命周期或者值变化后做一些操作的话&＃xff0c;必须借助  useEffect  的一些特性去实现。
  2. useState  产生的 changeState 方法并没有提供类似于  setState  的第二个参数一样的功能&＃xff0c;因此如果需要在 State 改变后执行一些方法&＃xff0c;必须通过  useEffect  实现。
该钩子接受两个参数&＃xff0c;第一个参数为副作用需要执行的回调&＃xff0c;生成的回调方法可以返回一个函数&＃xff08;将在组件卸载时运行&＃xff09;&＃xff1b;第二个为该副作用监听的状态数组&＃xff0c;当对应状态发生变动时会执行副作用&＃xff0c;如果第二个参数为空&＃xff0c;那么在每一个 State 变化时都会执行该副作用。
使用方法如下&＃xff1a;

const [count, changeCount] &＃61; useState(0);

// 将在count变化时打印最新的count数据
useEffect(() &＃61;> {
  message.info(&＃96;count发生变动&＃xff0c;最新值为${count}&＃96;);
}, [count])
640?wx_fmt&＃61;gif

在上面代码中我们实现了在  useEffect  这个钩子适用情况中的第二种情况&＃xff0c;那么如何使用该钩子才能实现类似于类组件中生命周期的功能呢&＃xff1f;既然第一个参数是副作用执行的回调&＃xff0c;那么实现我们所要功能的重点就应该在第二个参数上了。
componentDidMount  &&   componentWillUnmout&＃xff1a;这两个生命周期只在页面挂载/卸载后执行一次。前面讲过&＃xff0c;所有的副作用在组件挂载完成后会执行一次 &＃xff0c;如果副作用存在返回函数&＃xff0c;那么返回的函数将在卸载时运行。借助这样的特性&＃xff0c;我们要做的就是让目标副作用在初始化执行一次后再也不会被调用&＃xff0c;于是只要让与该副作用相关联的状态为空&＃xff0c;不管其他状态如何变动&＃xff0c;该副作用都不会再次执行&＃xff0c;即实现了  componentDidMount  与  componentWillUnmout。

import React, { useState, useEffect } from &＃39;react&＃39;;
import { message } from &＃39;antd&＃39;;

function Child({ visible }) {
  useEffect(() &＃61;> {
    message.info(&＃39;我只在页面挂载时打印&＃39;);
    return () &＃61;> {
      message.info(&＃39;我只在页面卸载时打印&＃39;);
    };
  }, []);

  return visible ? &＃39;true&＃39; : &＃39;false&＃39;;
}

export default function HookDemo() {
  const [visible, changeVisible] &＃61; useState(true);


  return (
    <div>
      {
        visible && <Child visible&＃61;{visible} />
      }
      <button onClick&＃61;{() &＃61;> { changeVisible(!visible); }}>
        改变visible
      button>
    div>
  );
}
640?wx_fmt&＃61;gif

componentDidUpdate&＃xff1a;该生命周期在每次页面更新后都会被调用。那么按照之前的逻辑&＃xff0c;就应该把所有的状态全部放在第二个状态中&＃xff0c;但是这样的话新增/删除一个状态都需要改变第二参数。其实&＃xff0c;如果第二个参数为空&＃xff0c;那么在每一个 State 变化时都会执行该副作用&＃xff0c;那么如果要实现  componentDidUpdate  就非常简单了。

useEffect(() &＃61;> {
  // ...副作用逻辑
}) // 注意上面说的关联状态为空不是说不传递第二个参数&＃xff0c;而是第二个参数应该为一个空数组
640?wx_fmt&＃61;gif


在类组件中&＃xff0c;如果在  componentDidMount  中多次调用  setState  设置一个值&＃xff08;当然不推荐这样做&＃xff09;&＃xff0c;并在成功的回调中打印该值&＃xff0c;那么最后的结果很可能会打印很多个相同的最后一次设置的值。是因为类的 setState  是一个类异步的结果&＃xff0c;他们会将所有变动的内容进行收集然后在合适的时间去统一赋值。
而在  useEffect  中&＃xff0c;所有的变量的值都会保留在该副作用执行的时刻&＃xff0c;类似于 for 循环中的 let 或者 闭包&＃xff0c;所有的变量都维持在副作用执行时的状态&＃xff0c;也有人称这个为 Capture Value。
useCallback
生成 Callback 的钩子。用于对不同  useEffect  中存在的相同逻辑的封装&＃xff0c;减少代码冗余&＃xff0c;配合  useEffect   使用。
该钩子先看例子会比较好理解一下&＃xff1a;

const [count1, changeCount1] &＃61; useState(0);
const [count2, changeCount2] &＃61; useState(10);

const calculateCount &＃61; useCallback(() &＃61;> {
  if (count1 && count2) {
    return count1 * count2;
  }
  return count1 &＃43; count2;
}, [count1, count2])

useEffect(() &＃61;> {
    const result &＃61; calculateCount(count, count2);
    message.info(&＃96;执行副作用&＃xff0c;最新值为${result}&＃96;);
}, [calculateCount])
640?wx_fmt&＃61;gif
、
在上面的例子中我们通过  useCallback  的使用生成了一个回调&＃xff0c;useCallback  的使用方法和  useEffect  一致&＃xff0c;第一个参数为生成的回调方法&＃xff0c;第二个参数为该方法关联的状态&＃xff0c;任一状态发生变动都会重新生成新的回调。
通过上面代码的使用&＃xff0c;我们将 count1 / count2 的值与一个叫做 calculateCount 的方法关联了起来&＃xff0c;如果组件的副作用中用到计算 count1 和 count2 的值的地方&＃xff0c;直接调用该方法即可。
其中和直接使用  useEffect  不同的地方在于使用  useCallback  生成计算的回调后&＃xff0c;在使用该回调的副作用中&＃xff0c;第二个参数应该是生成的回调。其实这个问题是很好理解的&＃xff0c;我们使用  useCallback  生成了一个与 count1 / count2 相关联的回调方法&＃xff0c;那么当关联的状态发生变化时会重新生成新的回调&＃xff0c;副作用监听到了回调的变化就会去重新执行副作用&＃xff0c;此时  useCallback  和 useEffect 是按顺序执行的&＃xff0c; 这样就实现了副作用逻辑的抽离。
useRef
useRef  接受一个参数&＃xff0c;为 ref 的初始值。类似于类组件中的  createRef  方法 &＃xff0c;该钩子会返回一个对象&＃xff0c;对象中的 current 字段为我们 指向的实例 / 保存的变量&＃xff0c;可以实现获得目标节点实例或保存状态的功能。
useRef 保存的变量不会随着每次数据的变化重新生成&＃xff0c;而是保持在我们最后一次赋值时的状态&＃xff0c;依靠这种特性&＃xff0c;再配合 useCabllback  和  useEffect 我们可以实现 preProps/preState 的功能。

const [count, changeCount] &＃61; useState(0);
const [count1, changeCount1] &＃61; useState(0);
// 创建初始值为空对象的prestate
const preState &＃61; useRef({});
// 依赖preState进行判断时可以先判断&＃xff0c;最后保存最新的state数据
useEffect(() &＃61;> {
  const { ... } &＃61; preState.current;
  if (// 条件判断) {
    // 逻辑
  }
  // 保存最新的state
  preState.current &＃61; {
    count,
    count1,
  }
});
640?wx_fmt&＃61;gif

另外&＃xff0c;当我们将使用  useState 创建的状态赋值给  useRef  用作初始化时&＃xff0c;手动更改 Ref 的值并不会引起关联状态的变动。从该现象来看&＃xff0c;useRef 似乎只是在内存空间中开辟了一个堆空间将初始化的值存储起来&＃xff0c;该值与初始化的值存储在不同的内存空间&＃xff0c;修改 Ref 的值不会引起视图的变化。

export default function HookDemo() {
  const [count] &＃61; useState({ count: 1 });

  const countRef &＃61; useRef(count);

  return (
    <div>
      {count.count}
      <button onClick&＃61;{() &＃61;> { countRef.current.count &＃61; 10; }}>
        改变ref
      button>
    div>
  );
}
640?wx_fmt&＃61;gif
useRef正常
useMemo
Memo 为 Memory 简写&＃xff0c;useMemo 即使用记忆的内容。该钩子主要用于做性能的优化。
前面我们说过了当状态发生变化时&＃xff0c;没有设置关联状态的  useEffect  会全部执行。同样的&＃xff0c;通过计算出来的值或者引入的组件也会重新计算/挂载一遍&＃xff0c;即使与其关联的状态没有发生任何变化。
在类组件中我们有 
shouldComponetUpdate  以及  React.memo  
帮助我们去做性能优化&＃xff0c;如果在函数组件中没有类似的功能显示是违背了官方的初衷的&＃xff0c;于是就有了  useMemo  这个钩子。
在业务中&＃xff0c;我们可以用  useMemo  来处理计算结果的缓存或引入组件的防止重复挂载优化。其接受两个参数&＃xff0c;第一个参数为一个 Getter 方法&＃xff0c;返回值为要缓存的数据或组件&＃xff0c;第二个参数为该返回值相关联的状态&＃xff0c;当其中任何一个状态发生变化时就会重新调用 Getter 方法生成新的返回值。
具体代码如下&＃xff1a;

import React, { useState, useMemo } from &＃39;react&＃39;;
import { message } from &＃39;antd&＃39;;

export default function HookDemo() {
  const [count1, changeCount1] &＃61; useState(0);
  const [count2, changeCount2] &＃61; useState(10);

  const calculateCount &＃61; useMemo(() &＃61;> {
    message.info(&＃39;重新生成计算结果&＃39;);
    return count1 * 10;
  }, [count1]);
  return (
    <div>
      {calculateCount}
      <button onClick&＃61;{() &＃61;> { changeCount1(count1 &＃43; 1); }}>改变count1button>
      <button onClick&＃61;{() &＃61;> { changeCount2(count2 &＃43; 1); }}>改变count2button>
    div>
  );
}
640?wx_fmt&＃61;gif

初次接受  useMemo  时可能我们会觉得该钩子只是用来做计算结果的缓存&＃xff0c;返回值只能是一个数字或字符串。其实  useMemo  并不关心我们的返回值类型是什么&＃xff0c;它只是在关联状态发生变动时重新调用我们传递的 Getter 方法 生成新的返回值&＃xff0c;也就是说  useMemo  生成的是 Getter 方法与依赖数组的关联关系。因此&＃xff0c;如果我们将函数的返回值替换为一个组件&＃xff0c;那么就可以实现对组件挂载/重新挂载的性能优化。
代码如下&＃xff1a;

import React, { useState, useMemo } from &＃39;react&＃39;;
import { message } from &＃39;antd&＃39;;

function Child({ count }) {
  return <p>当前传递的count为:{count}p>;
}

export default function HookDemo() {
  const [count1, changeCount1] &＃61; useState(0);
  const [count2, changeCount2] &＃61; useState(10);

  const child &＃61; useMemo(() &＃61;> {
    message.info(&＃39;重新生成Child组件&＃39;);
    return <Child count&＃61;{count1} />;
  }, [count1]);
  return (
    <div>
      {child}
      <button onClick&＃61;{() &＃61;> { changeCount1(count1 &＃43; 1); }}>改变count1button>
      <button onClick&＃61;{() &＃61;> { changeCount2(count2 &＃43; 1); }}>改变count2button>
    div>
  );
}
640?wx_fmt&＃61;gif

其他钩子
今天主要讲了组件中常用的几个钩子&＃xff0c;剩下的未讲解的钩子中&＃xff0c;如
useLayoutEffect useImperativeHandle useDebugValue &＃xff0c;
其功能都比较简单就不在此赘述。
还有一个比较重要的钩子  useContext&＃xff0c;是 createContext 功能在函数式组件中的实现。通过该功能可以实现很多强大的功能&＃xff0c;可以是说官方的 Redux&＃xff0c;很多人对此应该有不少的了解。该钩子内容太多&＃xff0c;后续单独使用一个章节进行描述。

编写自己的钩子

其实从上面讲解的内容来看&＃xff0c;钩子并不是什么高深莫测的东西&＃xff0c;它只是对我们常用逻辑的一些封装&＃xff0c;接下来就会通过具体的代码来教大家写一个自己的钩子。

最基本的钩子

最基本的钩子也就是返回包含了更多逻辑的 State 以及改变 State 方法的钩子。拿计数器来说&＃xff0c;其最基本的就是返回当前的数字以及减少/增加/重置等功能&＃xff0c;明确完功能后可以开始动手做了。

import React, { useState } from &＃39;react&＃39;;

// 编写我们自己的hook&＃xff0c;名字以use开头
function useCounter(initialValue) {
  // 接受初始化的值生成state
  const [count, changeCount] &＃61; useState(initialValue);
  // 声明减少的方法
  const decrease &＃61; () &＃61;> {
    changeCount(count - 1);
  }
  // 声明增加的方法
  const increase &＃61; () &＃61;> {
    changeCount(count &＃43; 1);
  }
  // 声明重置计数器方法
  const resetCounter &＃61; () &＃61;> {
    changeCount(0);
  }
  // 将count数字与方法返回回去
  return [count, { decrease, increase, resetCounter }]
}

export default function myHooksView() {
  // 在函数组件中使用我们自己编写的hook生成一个计数器&＃xff0c;并拿到所有操作方法的对象
  const [count, controlCount] &＃61; useCounter(10);
  return (
      <div>
        当前数量&＃xff1a;{count}
            <button onClick&＃61;{controlCount.decrease}>减少button>
            <button onClick&＃61;{controlCount.increase}>增加button>
            <button onClick&＃61;{controlCount.resetCounter}>重置button>
    div>
  )
}
在上面的例子中&＃xff0c;我们将在  useCounter  这个钩子中创建了一个关联了  initialValue  的状态&＃xff0c;并创建减少/增加/重置的方法&＃xff0c;最终将其通过  return  返回出去。这样在其他组件需要用到该功能的地方&＃xff0c;通过调用该方法拿到其返回值&＃xff0c;即可实现对  useCounter  组件封装逻辑的复用。
演示效果如图&＃xff1a;
640?wx_fmt&＃61;gif

返回 DOM 的钩子

返回 DOM 其实和最基本的 Hook 逻辑是相同的&＃xff0c;只是在返回的数据内容上有一些差异&＃xff0c;具体还是看代码&＃xff0c;以一个 Modal 框为例。

import React, { useState } from &＃39;react&＃39;;
import { Modal } from &＃39;antd&＃39;;

function useModal() {
  const [visible, changeVisible] &＃61; useState(false);

  const toggleModalVisible &＃61; () &＃61;> {
    changeVisible(!visible);
  };

  return [(
    <Modal
      visible&＃61;{visible}
      onOk&＃61;{toggleModalVisible}
      onCancel&＃61;{toggleModalVisible}
    >
      弹窗内容
      Modal>
  ), toggleModalVisible];
}

export default function HookDemo() {
  const [modal, toggleModal] &＃61; useModal();
  return (
    <div>
      {modal}
      <button onClick&＃61;{toggleModal}>打开弹窗button>
    div>
  );
}

这样我们就实现了一个返回了弹窗内容以及改变弹窗显示状态的 Hook&＃xff0c;其实可以封装的内容还有很多很多&＃xff0c;可以通过配置项的设置实现更丰富的封装。
演示效果如图&＃xff1a;
640?wx_fmt&＃61;gif

钩子/最终总结

钩子总结

640?wx_fmt&＃61;jpeg


从上面的表格中我们可以看出&＃xff0c;在官方提供的 Hook 中&＃xff0c;除了基本的 useState与 useRef外&＃xff0c;其他钩子都存在第二个参数&＃xff0c;第一个方法的执行与第二个参数相互关联。于是我们可以得出一个结论&＃xff0c;在使用了 Hook 的函数式组件中&＃xff0c;我们在使用副作用/引用子组件时都需要时刻注意对代码进行性能上的优化。

最终总结

我在前面的总结里是这么评价 React Hooks 的&＃xff1a;
Hooks 组件的目标并不是取代 class component 组件&＃xff0c;而是增加函数式组件的使用率&＃xff0c;明确通用工具函数与业务工具函数的边界&＃xff0c;鼓励开发者将业务通用的逻辑封装成 React Hooks 而不是工具函数。
希望看完这篇文章的你也有自己的一些看法&＃xff0c;欢迎拍砖讨论。

招贤纳士

招人&＃xff0c;前端&＃xff0c;隶属政采云前端大团队&＃xff08;ZooTeam&＃xff09;&＃xff0c;50 余个小伙伴正等你加入一起浪&＃xff5e; 如果你想改变一直被事折腾&＃xff0c;希望开始能折腾事&＃xff1b;如果你想改变一直被告诫需要多些想法&＃xff0c;却无从破局&＃xff1b;如果你想改变你有能力去做成那个结果&＃xff0c;却不需要你&＃xff1b;如果你想改变你想做成的事需要一个团队去支撑&＃xff0c;但没你带人的位置&＃xff1b;如果你想改变既定的节奏&＃xff0c;将会是“5年工作时间3年工作经验”&＃xff1b;如果你想改变本来悟性不错&＃xff0c;但总是有那一层窗户纸的模糊… 如果你相信相信的力量&＃xff0c;相信平凡人能成就非凡事&＃xff0c;相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程&＃xff0c;亲手参与一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程&＃xff0c;我觉得我们该聊聊。任何时间&＃xff0c;等着你写点什么&＃xff0c;发给 ZooTeam&＃64;cai-inc.com

完


欢迎评论区留下你的精彩评论~

觉得文章不错可以分享到朋友圈让更多的小伙伴看到哦~

客官&＃xff01;在看一下呗


推荐阅读
  • nodejs

    深入理解Vue.js：从入门到精通

    深入理解Vue.js：从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例，帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • function

    Redux入门指南

    Redux入门指南
    本文介绍Redux的基本概念和工作原理，帮助初学者理解如何使用Redux管理应用程序的状态。Redux是一个用于JavaScript应用的状态管理库，特别适用于React项目。 ... [详细]
  • 数组

    JavaScript 基础语法指南

    JavaScript 基础语法指南
    本文详细介绍了 JavaScript 的基础语法，包括变量、数据类型、运算符、语句和函数等内容，旨在为初学者提供全面的入门指导。 ... [详细]
  • client

    基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发

    基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
    本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
  • function

    ReactJS 计算器应用：增加功能

    本文将指导如何向ReactJS计算器应用添加必要的功能，使其能够响应用户操作并正确计算数学表达式。 ... [详细]
  • stream

    2019年前端技术趋势及职业发展路径

    本文探讨了2019年前端技术的发展趋势，包括工具化、配置化和泛前端化等方面，并提供了详细的学习路线和职业规划建议。 ... [详细]
  • const

    如何在React项目中将子组件的数据传递给父组件

    本文探讨了在React项目中实现子组件向父组件传递数据的方法，包括通过回调函数和使用React状态管理工具。 ... [详细]
  • 数组

    深入解析Java枚举及其高级特性

    深入解析Java枚举及其高级特性
    本文详细介绍了Java枚举的概念、语法、使用规则和应用场景，并探讨了其在实际编程中的高级应用。所有相关内容已收录于GitHub仓库[JavaLearningmanual](https://github.com/Ziphtracks/JavaLearningmanual)，欢迎Star并持续关注。 ... [详细]
  • python

    Python技巧：利用Cookie实现自动登录绕过验证码

    Python技巧：利用Cookie实现自动登录绕过验证码
    本文详细介绍了如何通过Python和Selenium库利用浏览器Cookie实现自动登录，从而绕过验证码验证。文章提供了具体的操作步骤，并附有代码示例，帮助读者理解和实践。 ... [详细]
  • install

    Python 工具推荐 | PyHubWeekly 第二十一期：提升命令行体验的五大工具

    Python 工具推荐 | PyHubWeekly 第二十一期：提升命令行体验的五大工具
    本期 PyHubWeekly 为大家精选了 GitHub 上五个优秀的 Python 工具，涵盖金融数据可视化、终端美化、国际化支持、图像增强和远程 Shell 环境配置。欢迎关注并参与项目。 ... [详细]
  • install

    初探七牛云存储：实现多服务器图片共享

    为了解决不同服务器间共享图片的需求，我们最初考虑建立一个FTP图片服务器。然而，考虑到项目是一个简单的CMS系统，为了简化流程，团队决定探索七牛云存储的解决方案。本文将详细介绍使用七牛云存储的过程和心得。 ... [详细]
  • 数组

    深入解析JavaScript数组的创建与常用方法

    JavaScript中的数组是数据集合的核心结构之一，内置了多种实用的方法。掌握这些方法不仅能提高开发效率，还能显著提升代码的质量和可读性。本文将详细介绍数组的创建方式及常见操作方法。 ... [详细]
  • copy

    ChatGPT：内容创造者还是非法搬运工？

    探讨ChatGPT在法律和版权方面的潜在风险及影响，分析其作为内容创造工具的合法性和合规性。 ... [详细]
  • include

    MySQL集群搭建指南（第二部分）

    本文详细介绍了如何解压并安装MySQL集群压缩包，创建用户和组，初始化数据库，配置环境变量，并启动相关服务。此外，还提供了详细的命令行操作步骤和常见问题的解决方案。 ... [详细]
  • 数组

    掌握Mosek矩阵运算，轻松应对优化挑战

    掌握Mosek矩阵运算，轻松应对优化挑战
    本篇文章继续深入探讨Mosek学习笔记系列，特别是矩阵运算部分，这对于优化问题的解决至关重要。通过本文，您将了解到如何高效地使用Mosek进行矩阵初始化、线性代数运算及约束域的设定。 ... [详细]
author-avatar
手机用户2502860763
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有