正文

一文看懂reacthooks

xiangzhihong  2022-02-13  741

关键词：

一、Hook简介

React Hooks是从React 16.8版本推出的新特性，目的是解决React的状态共享以及组件生命周期管理混乱的问题。React Hooks的出现标志着，React不会再存在无状态组件的情况，React将只有类组件和函数组件的概念。

众所周知，React应用开发中，组件的状态共享是一件很麻烦的事情，而React Hook只共享数据处理逻辑，并不会共享数据本身，因此也就不需要关心数据与生命周期绑定的问题。如下所示，是使用类组件实现计数器的示例。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

可以发现，类组件需要自己声明状态，并编写操作状态的方法，并且还需要维护状态的生命周期，显得特别麻烦。如果使用React Hook提供的State Hook来处理状态，那么代码将会简洁许多，重构后的代码如下所示。

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

可以看到，Example从一个类组件变成了一个函数组件，此函数组件拥有自己的状态，并且不需要调用setState()方法也可更新自己的状态。之所以可以如此操作，是因为类组件使用了useState函数。

二、基础Hook

2.1 useState

useState函数是React自带的一个Hook函数，而Hook函数拥有React状态和生命周期管理的能力。
可以看到，useState函数的入参只有一个，就是state的初始值，这个初始值可以是数字、字符串、对象，甚至是一个函数，如下所示。

function Example (props) {
    const [ count, setCount ] = useState(() => {
      return props.count || 0
    })
    return (
      <div>
        You clicked : { count }
        <button onClick={() => { setCount(count + 1)}}>
          Click me
        </button>
      </div>
      )
  }

并且，当入参是一个函数时，此函数只会在类组件初始渲染的时候才会被执行一次。
如果需要同时对一个state对象进行操作，那么可以直接使用函数进行操作，该函数会接收state对象的值，然后执行更新操作，如下所示。

function Example() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1)
  }

  function handleClickFn() {
    setCount((prevCount) => {
      return prevCount -1
    })
  }

  return (
      <>
        You clicked: {count}
        <button onClick={handleClick}>+</button>
        <button onClick={handleClickFn}>-</button>
      </>
  );
}

在上面的代码中，handleClick和handleClickFn都是更新的最新的状态值。并且操作同一个状态对象值的时候，为了节约性能，React会把多次状态更新进行合并，并一次性的更新状态对象的值。
在React应用开发中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件树，如下所示。

function Child({ onButtonClick, data }) {
  return (
    <button onClick={onButtonClick}>{data.number}</button>
  )
}

function Example () {
  const [number, setNumber] = useState(0)
  const [name, setName] = useState('hello')  
  const addClick = () => setNumber(number + 1)
  const data = { number }
  return (
    <div>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <Child onButtonClick={addClick} data={data} />
    </div>
  )
}

在上面的代码中，子组件引用number对象的数据，当父组件的name对象的数据发生变化时，虽然子组件没有发生任何变化，它也会执行重绘操作。在项目开发中，为了避免这种不必要的子组件重复渲染，需要使用useMemo和useCallback进行包裹，如下所示。

import {memo, useCallback, useMemo, useState} from "react";

function Child({ onButtonClick, data }) {
  return (
    <button onClick={onButtonClick}>{data.number}</button>
  )
}

Child = memo(Child)

function Example () {
  const [number, setNumber] = useState(0)
  const [name, setName] = useState('hello') 
  const addClick = useCallback(() => setNumber(number + 1), [number])
  const data = useMemo(() => ({ number }), [number])
  return (
    <div>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <Child onButtonClick={addClick} data={data} />
    </div>
  )
}

其中，useMemo和useCallback是React Hook提供的两个API，主要用于缓存数据、优化提升应用性能。它俩的共同点是，只有当依赖的数据发生变化时，才会调用回调函数去重新计算结果，不同点如下。

useMemo：缓存的结果是回调函数返回的值。
useCallback：缓存的是函数。因为函数式组件每当state发生变化，就会触发整个组件更新，当使用useCallback之后，一些没有必要更新的函数组件就会缓存起来。

在上面的示例中，我们把函数对象和依赖项数组作为参数传入useMemo，由于使用了useMemo，所以只有当某个依赖项发生变化时才会重新计算缓存的值。经过useMemo和useCallback的优化处理后，可以有效避免每次渲染带来的性能开销。

2.2 useEffect

正常情况下，在React的函数组件的函数体中，网络请求、模块订阅以及DOM操作都属于副作用的范畴，官方不建议开发者在函数体中写这些副作用代码的，而Effect Hook就是专门用来处理这些副作用的。下面是使用类组件实现计数器的例子，副作用代码都写在componentDidMount和componentDidUpdate生命周期函数中，如下所示。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

可以看到，componentDidMount和componentDidUpdate两个生命周期函数中的代码是一样的。之所以出现同样的代码，是因为很多情况下，我们希望在组件加载和更新时执行同样的操作。从概念上说，我们希望可以对它进行合并处理，遗憾的是类组件病没有提供这样的方法。不过，现在使用Effect Hook就可以避免这种问题，如下所示。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

事实上，useEffect只会在每次DOM渲染后执行，因此不会阻塞页面的渲染。并且，useEffect同时具备componentDidMount、componentDidUpdate和componentWillUnmount等生命周期函数的执行时机。同时，我们还可以使用useEffect在组件内部直接访问state变量或是props，因此可以在useEffect执行函数值的更新操作。
在类组件中，通常会在componentDidMount生命周期中设置订阅消息，并在componentWillUnmount生命周期中清除。例如，有一个ChatAPI模块，用来订阅好友的在线状态，如下所示。

class FriendStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }

  render() {
    if (this.state.isOnline === null) {
      return 'Loading...';
    }
    return this.state.isOnline ? 'Online' : 'Offline';
  }
}

可以发现，componentDidMount和componentWillUnmount是相对应的，即在componentDidMount生命周期中的设置需要在componentWillUnmount生命周期中进行解除。不过，手动处理模块订阅是相当麻烦的，如果使用Effect Hook进行处理就会简单许多，如下所示。

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

事实上，每个Effect都会返回一个清除函数，当useEffect的返回值是一个函数的时候，React会在组件卸载的时候执行一遍清除操作。useEffect会在每次渲染后执行，但有时候我们希望只有在state或props改变的情况下才执行渲染，下面是类组件的写法。

  if (prevState.count !== this.state.count) {
    document.title = `You clicked ${this.state.count} times`;
  }
}

如果使用React Hook，只需要传入第二个参数即可，如下所示。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

可以发现，第二个参数是一个数组，可以将Effect用到的所有props和state都传进去。如果只需要在组件挂载和卸载时才执行，那么第二个参数可以传一个空数组。

除了useEffect外，useLayoutEffect也可以执行副作用和清理操作。不同之处在于，useEffect会在浏览器渲染完成后执行，而useLayoutEffect是在浏览器渲染前执行。

2.3 useContext

在类组件中，组件之间的数据共享是通过属性props来实现的。在函数组件中，由于没有构造函数constructor和属性props的概念，组件之间传递数据只能通过useContext来实现。
useContext是React Hook提供的跨级组件数据传递的一种方式，可以很方便的去订阅上下文的改变，并在合适的时候重新渲染组件。useContext的使用方式如下。

const value = useContext(MyContext);

可以看到，useContext接收一个上下文对象context，并返回该上下文对象的当前值。当前上下文对象的值由上层组件中距离当前组件最近的数据提供者决定。
useContext的主要作用就是实现组件之间的数据传递。首先，新建一个命名Example.js文件，并添加如下代码。

import { useState,createContext} from "react";

const CountContext = createContext()

function Example(){
    const [ count , setCount ] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
            <CountContext.Provider value={count}>
            </CountContext.Provider>
        </div>
    )
}

在上面的代码中，我们把count变量使用Provider包裹起来，即允许它实现跨层级组件值的传递，当父组件的count变量发生变化时子组件也会发生变化。
有了上下文变量之后，接下来就可以使用useContext接收上下文变量的值了。在Example.js文件中新建一个Counter组件，用来显示上下文对象count变量的值，代码如下。

function Counter(){
    const count = useContext(CountContext)  
    return (<h2>{count}</h2>)
}

然后，我们还需要在<CountContext.Provider>标签中引入Counter组件，如下所示。

<CountContext.Provider value={count}>
    <Counter/>
</CountContext.Provider>

可以发现，使用useContext方式在组件之间传递值时，需要使用Provider包裹需要传递的变量。

三其他Hook

3.1 useReducer

众所周知，JavaScript的Redux状态管理框架由Action、Reducer和Store三个对象构成，而Reducer是唯一可以更新组件中State的途径。Reducer本质上是一个函数，它接收两个参数，状态和控制业务逻辑的判断参数，如下所示。

function countReducer(state, action) {
    switch(action.type) {
        case 'add':
            return state + 1;
        case 'sub':
            return state - 1;
        default:
            return state;
    }
}

useReducer是React Hooks提供的一个函数，主要用来在某些复杂的场景中替换useState。例如，包含复杂逻辑的state且包含多个子值，或者后面的state依赖于前面的state等。useReducer的语法格式如下。

const [state, dispatch] = useReducer(reducer, initialArg, init);

可以发现，useReducer的使用方式与Redux状态框架时非常相似的，它接收一个形如(state, action) => newState的Reducer，并返回当前state以及dispatch方法。例如，下面是使用useReducer实现计数器的代码。

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

有时候，需要惰性地创建初始state，那么只需要将初始化函数作为useReducer的第三个参数传入即可，如下所示。

function init(initialCount) {
    return {count: initialCount};
}

function reducer(state, action) {
    …. //省略其他代码
}

function Example({initialCount}) {
    const [state, dispatch] = useReducer(reducer, initialCount, init);
    return (
      …  //省略其他代码
    );
}

有时候，Reducer Hook的返回值与当前state的值是相同的，此时需要跳过子组件的渲染及副作用的执行。
需要注意的是，由于React不会对组件树的深层节点进行不必要的渲染，所以不必担心跳过渲染后再次渲染该组件。如果为了避免在渲染期间执行高开销的计算，可以使用useMemo进行优化。

3.2 useMemo

在类组件中，每一次状态的更新都会触发组件树的重新绘制，而重新绘制必然会带来不必要的性能开销。同样，在函数组件中，为了避免useState每次渲染时带来的高开销计算，React Hook提供了useMemo函数。

useMemo之所以能够带来性能上的提升，是因为在依赖不变的情况下，useMemo会返回相同的引用，避免子组件进行无意义的重复渲染。例如，下面是一个普通的useState的使用示例。

function Example() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
    
    function expensive() {
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {
            sum += i;
        }
        return sum;
    }

    return (
        <>
            {count}：{expensive()}
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </>
    );
}

在上面的示例中，无论是修改count还是val的值，都会触发expensive方法的执行。不过，由于expensive方法的执行只依赖于count的值，而在修改val值的时候是没有必要再次计算的。所以，为了避免这种不必要的计算，可以使用useMemo优化上面的代码，如下所示。

function Example() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');

    const expensive = useMemo(() => {
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {
            sum += i;
        }
        return sum;
    }, [count]);

    return (
        <>
            {count}：{expensive()}
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </>
    );
}

在上面的代码中，我们使用useMemo来处理耗时计算，然后将计算结果传递给count并触发状态刷新。经过useMemo处理后，count只会在改变的时候才会触发耗时计算执行状态刷新，而修改val则不会触发刷新。

3.3 useCallback

和useMemo一样，useCallback也是用来做性能优化的，即只有当依赖的数据发生变化时，才会调用回调函数重新计算结果。不同之处在于，useMemo主要用于缓存计算结果的值，而useCallback缓存的是函数。useCallback的语法格式如下。
const fnA = useCallback(fnB, [a])
在上面的语句中，useCallback会将传递给它的函数fnB返回，并且会将函数fnB的运行结果进行缓存。并且，当依赖a变更时还会返回新的函数。由于返回的是函数，无法判断返回的函数是否发生变更，所以需要借助ES6新增的数据类型Set来辅助判断，如下所示。

function Example() {

    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');

    const callback = useCallback(() => {
    }, [count]);
    set.add(callback);

    return (
        <div>
            {count}:{set.size}
            <div>
                <button onClick={() => setCount(count + 1)}>+</button>
                <input value={val} onChange={e => setVal(e.target.value)}/>
            </div>
        </div>
    );
}

可以看到，每次修改count时set.size就会加1，而useCallback依赖变量count，所以每次count发生变更时就会返回一个新的函数。而val发生变更时set.size则不会发生变化，说明它返回的是缓存的旧函数。
再看另外一个场景：有一个包含子组件的父组件，子组件会接收一个函数作为props。通常来说，如果父组件发生更新，那么子组件也会执行更新，但在大多数场景下，子组件的更新是没有必要的。此时我们可以使用useCallback返回缓存的函数，并把这个缓存的函数作为props传递给子组件，如下所示。

function Parent() {

    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
    const callback = useCallback(() => {
        return count;
}, [count]);

    return (
        <div>
            {count}
            <Child callback={callback}/>
            <div>
                <button onClick={() => setCount(count + 1)}>+</button>
                <input value={val} onChange={e => setVal(e.target.value)}/>
            </div>
        </div>
    );
}

function Child({callback}) {
    const [count, setCount] = useState(() => callback());
    useEffect(() => {
        setCount(callback());
    }, [callback]);
    return <div>
        {count}
    </div>
}

事实上，useEffect、useMemo、useCallback都是自带闭包的。即每次组件渲染时，它们都会捕获组件函数上下文中的状态信息，所以使用这三种Hook时，它们反映的都是当前的状态。如果要获取组件上一次的状态，那么可以使用ref来进行获取。

3.4 useRef

在React开发中，Ref主要作用是获取组件实例或者DOM元素，创建Ref主要有两种方式，即createRef和useRef。其中，使用createRef方式创建的Ref每次渲染都会返回一个新的引用，而useRef每次渲染都会返回相同的引用。
使用createRef方式创建Ref主要是类组件。例如，下面是使用createRef()方法来创建Ref的例子，如下所示。

class Example extends React.Component {

    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    componentDidMount() {
        this.myRef.current.focus();
    }

    render() {
        return <input ref={this.myRef} type="text" />;
    }
}

如果使用React Hooks的useRef()方法创建Ref，代码如下。

function Example() {
    const myRef = useRef(null);

    useEffect(() => {
        myRef.current.focus();
    }, [])

    return <input ref={myRef} type="text" />;
}

使用useRef方式创建的Ref返回一个引用的DOM对象，返回的对象将在组件的整个生存期内持续存在。

四、自定义Hook

通过自定义Hook，我们可以将组件逻辑提取到可重用的函数中。在前面的聊天程序中，使用React Hook显示好友在线状态的代码如下所示。

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

现在，假设聊天应用中有一个联系人列表，当用户在线时需要把名字设置为绿色。要实现这个需求，需要新建一个FriendListItem组件，并添加如下代码。

function FriendListItem(props) {
  
  …. //省略其他相同的代码

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

可以发现，FriendStatus和FriendListItem之间的状态逻辑基本是一样的。在类组件中，共享组件之间的状态逻辑有props和高阶组件两种方式。而在React Hook中，如果要共享两个函数之间的逻辑，可以自定义一个Hook来封装订阅的逻辑，如下所示。

import React, { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });
  return isOnline;
}

在React中，自定义的Hook是一个以use开头的函数，函数内部可以调用其他的Hook，并且自定义Hook时，入参和返回值都可以根据需要自定义，没有特殊的约定。
现在，需要共享的状态逻辑已经被提取到useFriendStatus的自定义Hook中。然后，我们就可以像使用普通函数一样调用自定义的Hook函数，如下所示。

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}


function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

自定义Hook是一种重用状态逻辑的机制，所以每次使用自定义Hook时，所有state和副作用都是完全隔离的。需要再次强调的是，自定义Hook时需要以use开头来命名，这也是为了静态代码检测工具的检测。

五、Hook规则

Hook本质上来说就是一个JavaScript函数，但是在使用它时需要遵循两条规则。

只在最顶层使用Hook，不能在循环、条件或嵌套函数中调用Hook。
只能在React函数中调用Hook，不能在普通JavaScript函数中调用Hook。

Hooks的设计极度依赖事件定义的顺序，如果在后序的渲染环节中Hooks的调用顺序发生变化，就可能会出现不可预知的问题。在React应用开发过程中，为了保证Hooks调用顺序的稳定性，官方开发了一个名叫eslint-plugin-react-hooks的ESLint 插件来进行静态代码检测。使用前，需要先将此插件添加到React项目中，如下所示。

npm install eslint-plugin-react-hooks --save-dev

安装完成后，会在package.json配置文件中看到如下配置脚本。

{
  "plugins": [
     ...  //省略其他插件包
    "react-hooks"
  ],
  "rules": {
     ...    //省略其他规则
    "react-hooks/rules-of-hooks": "error",   //检查Hook的规则
    "react-hooks/exhaustive-deps": "warn"  //检查effect的依赖
  }
}

经过上面的配置后，如果代码不符合Hook规范，那么系统就会给出相应的警告，并提示开发者进行对应的修改。

reacthook踩坑指北—一文解决你所有关于setstate的疑惑(代码片段)

0.前言目前react已全面拥抱hook，但使用hook进行开发时，你会发现state的值往往跟你想象的不一样，为什么state会这么奇怪呢，通过以下案例，让我们一探究竟吧。1.state类型为Object或Array时，setState无法生效。说明当我们state所定义... 查看详情

模型推理一文看懂winograd卷积加速算法(代码片段)

...相关的文章，感兴趣的同学可以查阅《【模型推理】一文看懂Img2Col卷积加速算法》、《【模型推理】一文看懂GoogleTPU脉动阵列加速卷积计算原理》、《【模型推理】谈谈为什么查看详情

一文看懂metaleaaring(元学习)

概念MetaLearning（元学习）或者叫做LearningtoLearn（学会学习）已经成为继ReinforcementLearning（增强学习）之后又一个重要的研究分支（以后仅称为MetaLearning）。对于人工智能的理论研究，呈现出了Art... 查看详情

一文看懂constraintlayout的用法

ConstraintLayout相对于RelativeLayout来说性能更好，布局上也更加灵活。在最新的GoogleAndroid开发文档中是推荐使用ConstraintLayout的，下面来看看具体用法。0x00相对位置(Relativepositioning)这个比较简单，看图解释，假设控件B要放在控件A的... 查看详情

一文看懂github

GitHub介绍GitHub是为开发者构建的一个开发平台。GitHub是一个受开发者工作方式启发的开发平台，从开源到商业，能够在上面进行托管和查看代码、管理项目和数百万其他开发人员一起开发软件。GitHub提供免费账户和付费账户，免... 查看详情

一文看懂25个神经网络模型

原文链接： https://blog.csdn.net/qq_35082030/article/details/73368962?locationNum=11&fps=11.引言在深度学习十分火热的今天，不时会涌现出各种新型的人工神经网络，想要实时了解这些新型神经网络的架构还真是不容易。光是知道各式各... 查看详情

一文看懂什么是https，及其安全传输机制和原理

一文看懂什么是HTTPS，及其安全传输机制和原理一、前言二、什么是HTTP和HTTPS？1.什么是HTTP？1.1HTTP的工作原理1.2HTTP的缺点1.3HTTP的实际案例2.HTTPS:（HyperTextTransferProtocoloverSecureSocketLayer）3.加密算法3.1对称加密算法3.2非对称加密4.基... 查看详情

一文看懂决策树

决策树是一种逻辑简单的机器学习算法，它是一种树形结构，所以叫决策树。本文将介绍决策树的基本概念、决策树学习的3个步骤、3种典型的决策树算法、决策树的10个优缺点。什么是决策树？决策树是一种解决分类问题... 查看详情

一文看懂java8的lambda表达式！

一文看懂Java8的Lambda表达式！IT领域的技术日新月异，Java14很快就要问世了，但是对于国内的许多程序员来说，连Java8都还没有真正掌握。今天，我们就来温习一下Java8的特性之一，Lambda表达式。Lambda表达式的前世--匿名类以往，... 查看详情

一文看懂命令行参数的用法——python中的getopt神器(代码片段)

一文看懂命令行参数的用法——Python中的getopt神器参考原文：Python模块之命令行参数解析-每天进步一点点！！！-博客园https://www.cnblogs.com/madsnotes/articles/5687079.htmlpythongetopt使用-tianzhu123的专栏-CSDN博客https://blog.csdn.net/tianzhu123/artic... 查看详情

一文看懂什么是https，及其安全传输机制和原理

没基础，也可一文看懂python中的csv模块(代码片段)

这篇博客就为你介绍一个知识点，python内置模块csv。一文看懂csvcsv（Comma-SeparatedValues）文件是什么？python中的csv文件清晰解法读取文件写入文件csv文件其它说明csv（Comma-SeparatedValues）文件是什么？它是... 查看详情

一文看懂大数据量表如何优化(代码片段)

1、造数准备1、线程池造数数据库脚本：CREATETABLE`t_user`(`id`int(11)NOTNULLAUTO_INCREMENTCOMMENT'主键ID',`username`varchar(100)DEFAULTNULLCOMMENT'姓名',`sex`varchar(2) 查看详情

一文看懂分布式存储架构

目录一、集中存储结构二、分布式存储1、分布式存储的兴起2、分布式存储的重要性3、分布式存储的种类和比较三、分布式理论浅析1、一致性和可用性2、数据分布3、复制4、分布式协议5、跨机房部署四、分布式文件系统1、Google... 查看详情

一文看懂composenavigation实现原理(代码片段)

前言一个纯Compose项目少不了页面导航的支持，而navigation-compose几乎是这方面的唯一选择，这也使得它成为Compose工程的标配二方库。介绍navigation-compose如何使用的文章很多了，然而在代码设计上Navigation也非常值得大家... 查看详情

aws攻略——一文看懂awsiam设计和使用

大纲1作用2初创公司IAM成长记2.1根用户（RootUser）2.2用户（User）2.2.1管理员2.2.2普通用户2.2.3规模膨胀2.3用户组(UserGroup)2.4角色（Role）3总结3.1资源或服务（ResourceOrService）3.2策略（Poli 查看详情

一文看懂ai芯片竞争五大维度

下一波大趋势和大红利从互联网+让位于人工智能+，已成业界共识。在AI的数据、算法和芯片之三剑客中，考虑到AI算法开源的发展趋势，数据与芯片将占据越来越重要的地位，而作为AI发展支柱的芯片更是AI业的竞争“核心&rdq... 查看详情

正文

一文看懂reacthooks

一、Hook简介

二、基础Hook

2.1 useState

2.2 useEffect

2.3 useContext

三 其他Hook

3.1 useReducer

3.2 useMemo

3.3 useCallback

3.4 useRef

四、自定义Hook

五、Hook规则

reacthook踩坑指北—一文解决你所有关于setstate的疑惑(代码片段)

模型推理一文看懂winograd卷积加速算法(代码片段)

一文看懂metaleaaring(元学习)

一文看懂constraintlayout的用法

一文看懂github

一文看懂25个神经网络模型

一文看懂什么是https，及其安全传输机制和原理

一文看懂决策树

一文看懂java8的lambda表达式！

一文看懂命令行参数的用法——python中的getopt神器(代码片段)

一文看懂什么是https，及其安全传输机制和原理

一文看懂什么是https，及其安全传输机制和原理

没基础，也可一文看懂python中的csv模块(代码片段)

一文看懂大数据量表如何优化(代码片段)

一文看懂分布式存储架构

一文看懂composenavigation实现原理(代码片段)

aws攻略——一文看懂awsiam设计和使用

一文看懂ai芯片竞争五大维度

三其他Hook