JS钩子函数与回调函数区别

回调函数可以继续扩展一个函数的功能，可以是程序非常灵活。

比如：

function

showdiv(callback){

$("#div1").show()

callback($("#div1"))

}

showdiv(function($div){

$div.text("hello

world")

})

//原本showdiv的功能就是现实一个div，加了callback函数当参数后就可以在执行完show之后改变div中的文字。

一般来说，callback函数用在异步中的例子比较多，因为在异步调用中，只能通过回调函数继续执行某个动作。

例如：

function

mythread(callback){

return

settimeout(1000*10,function(){

$("#div").append("

hello

")//10秒后在div中加一个行，然后在执行callback函数

callback()

})

}

jshook（JavaScript钩子）是一种技术，用于修改网页上的JavaScript代码。注入so（shared object）方法是一种通过修改so文件来实现对应用程序的修改和控制的方法。

因此，在Android系统中，可以使用jshook注入so方法。具体步骤如下：

1. 找到目标应用程序的so文件。可以使用反编译工具或者直接在应用程序的安装目录下查找。

2. 使用jshook技术，修改应用程序的JavaScript代码，注入so方法。这可以通过编写自定义JavaScript代码实现，或者使用现有的jshook工具，如Frida、Xposed等。

3. 在注入so方法之前，需要先实现对应的so文件的修改，以达到控制应用程序的目的。这可以通过使用反编译工具和so文件编辑工具实现。

总之，注入so方法是一种非常灵活和强大的技术，可以用于实现各种定制化的应用程序控制和修改。但是需要注意的是，这种技术需要对应用程序的内部结构和机制有一定的了解，并且需要谨慎使用，以避免对应用程序的正常运行造成不良影响。

需要。

Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件来强制执行这些规则。

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在下面会有更深入的解释。)

只在 React 函数中调用 Hook

**不要在普通的 JavaScript 函数中调用 Hook。**你可以：

在 React 的函数组件中调用 Hook

在自定义 Hook 中调用其他 Hook

遵循此规则，确保组件的状态逻辑在代码中清晰可见。

ESLint 插件

我们发布了一个名为 eslint-plugin-react-hooks 的 ESLint 插件来强制执行这两条规则。如果你想尝试一下，可以将此插件添加到你的项目中：

我们打算后续版本默认添加此插件到 Create React App 及其他类似的工具包中。

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

1

1

// 你的 ESLint 配置

{

"plugins": [

// ...

"react-hooks"

],

"rules": {

// ...

"react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则

"react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖

}

}

1

2

3

4

5

6

7

8

9

10

11

12

1

2

3

4

5

6

7

8

9

10

11

12

说明

正如我们之前学到的，我们可以在单个组件中使用多个 State Hook 或 Effect Hook

function Form() {

// 1. Use the name state variable

const [name, setName] = useState('Mary')

// 2. Use an effect for persisting the form

useEffect(function persistForm() {

localStorage.setItem('formData', name)

})

// 3. Use the surname state variable

const [surname, setSurname] = useState('Poppins')

// 4. Use an effect for updating the title

useEffect(function updateTitle() {

document.title = name + ' ' + surname

})

// ...

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

那么 React 怎么知道哪个 state 对应哪个 useState？答案是 React 靠的是 Hook 调用的顺序。因为我们的示例中，Hook 的调用顺序在每次渲染中都是相同的，所以它能够正常工作

// ------------

// 首次渲染

// ------------

useState('Mary') // 1. 使用 'Mary' 初始化变量名为 name 的 state

useEffect(persistForm) // 2. 添加 effect 以保存 form *** 作

useState('Poppins')// 3. 使用 'Poppins' 初始化变量名为 surname 的 state

useEffect(updateTitle) // 4. 添加 effect 以更新标题

// -------------

// 二次渲染

// -------------

useState('Mary') // 1. 读取变量名为 name 的 state（参数被忽略）

useEffect(persistForm) // 2. 替换保存 form 的 effect

useState('Poppins')// 3. 读取变量名为 surname 的 state（参数被忽略）

useEffect(updateTitle) // 4. 替换更新标题的 effect

// ...

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook 进行关联。但如果我们将一个 Hook (例如 persistForm effect ) 调用放到一个条件语句中会发生什么呢？

//