沉迷于 React JS
介绍
React 由 Facebook 开发，旨在满足这家社交媒体巨头在持续扩张过程中对更高效、更易于管理的代码日益增长的需求。React 于 2013 年发布，最初在开发者社区中遭遇了一些质疑，但很快便展现出其多功能性和稳定性，赢得了众多团队的青睐，帮助他们提升应用程序的速度和响应能力。React 是一个开源的 JavaScript 库，用于构建由组件组成的用户界面。组件是可以接收属性的函数，用于描述 UI 的某个部分如何在页面上显示以及如何在 DOM 中渲染。您可以为应用程序中的不同状态声明视图，React 会通过虚拟 DOM 处理更新和重新渲染的通信，从而使用户能够快速看到更改。通过构建封装的组件来管理自身状态，可以保持代码的组织性，从而加快编辑和调试速度——这对于像 Facebook 这样的大型应用程序至关重要，但对于任何规模的程序来说也同样方便。
React 中的生命周期
无论代码中是否明确描述，所有 React 类组件都会经历一个四部分生命周期：初始化（使用其 props 和默认状态构造组件）、挂载（将组件渲染到 DOM 上）、更新（更改组件并重新渲染和重绘应用程序）和卸载（从 DOM 中移除组件，释放相关资源）。
class Clock extends React.Component {
constructor(props) { //initializes class with props and state
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
//some code to run when component is rendered
//maybe fetch some data
}
componentWillUnmount() {
//perform cleanup after component is removed from DOM
//cancel network request, clear a counter, etc
}
render() { //outputs its contents to DOM (required)
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date}.</h2>
</div>
);
}
}
以前，只有类组件才能访问这些方法并管理状态。函数组件只是简单地向 DOM 输出一个元素。React 开发者引入 Hooks 后，彻底改变了这一切。
我们约会吧
自 2018 年起，Hooks 一直是 React 的一项实验性功能，并于 2019 年 2 月发布的 React 16.8 版本中正式推出。Hooks 允许你“挂钩”生命周期组件（无需类），并为函数式组件赋予状态，从而编写出更简洁、更易读的代码。Hooks 是一项“可选”功能，这意味着它们与类完全兼容，不会破坏旧代码，这使得开发者可以轻松地将它们集成到现有代码库中。Hooks 可以让组件变得简洁高效：
//a class component
import React from "react"
class App extends React.Component {
constructor() {
super();
this.state = {
answer: 'Yes'
}
}
render() {
return (
<div>
<h1> Is state important to know? {this.state.answer} </h1>
</div>
)
}
}
export default App
//a functional component using hooks
//you must import hooks
import React, { useState } from "react"
function App() {
const [ answer ] = useState('Yes')
return (
<div>
<h1> Is state important to know? {answer} </h1>
</div>
)
}
export default App
最常见的两个钩子是 useState 和 useEffect。
useState()
此方法用于管理要显示的状态。它利用了数组解构。其第一个值是要保存的状态，第二个值是一个允许你更改该状态的函数。
import React, { useState } from "react"
function App() {
const [count, setCount] = useState(0) //default value is 0
function increment() {
setCount(prevCount => prevCount + 1)
}
return (
<div>
<h1> {count} </h1>
<button onClick= {increment}> Increment! </button>
</div>
)
}
使用效果
useEffect 有效地取代了生命周期方法，它允许我们创建副作用——即从组件外部执行某些操作，例如发起网络请求、监听事件或操作 DOM。它接受一个回调函数和一个数组，您可以在该数组中指定要监听的变量。
//with no second argument, runs the function on every component render
useEffect(() => {
functionCall()
},)
//replaces componentDidMount by putting array as second arg, runs once
useEffect(() => {
functionCall()
}, [])
/* replaces deprecated componentWillUpdate by adding variables to the array
that it will watch for changes on */
useEffect(() => {
functionCall()
}, [watch, these, variables])
//replaces componentWillUnmount if returning function to clean up side effects
useEffect(() => {
function doStuff() {
//effect
}
return function cleanup() {
//remove effect
}
}, [])
此外，React 还包含以下更高级的内置 Hook：useContext、useReducer、useCallback、useMemo、useRef、useImperativeHandle、useLayoutEffect 和 useDebugValue。您甚至可以创建自定义 Hook 来处理程序特有的复杂逻辑。
结论
React 是一个简单而强大的库，用于快速构建交互式用户界面。它将界面拆分成封装的组件，每个组件都拥有自己的状态，并抽象化了渲染方法的大部分复杂性。Hooks 的引入进一步简化了 React 组件，通过允许函数式组件“钩入”生命周期方法，并支持在多个组件之间共享可重用的状态逻辑，从而消除了复杂类组件的必要性。代码变得更加简洁、清晰，也更容易阅读和理解。最重要的是，Hooks 与旧版 React 代码完全兼容，开发者可以选择将其引入现有程序，而不会破坏任何功能。您可以利用 React 内置的众多实用 Hooks，甚至可以创建自己的 Hooks。
文章来源：https://dev.to/christinegaraudy/hooked-on-react-js-8pl