React教程：组件，Hooks和性能(3)

首先，常规 CSS/内联样式在这里能够正常应用，你只需在 className 属性中添加 CSS 中的类名，它就能正常工作。内联样式与常规 HTML 样式略有不同。样式属性也是使用驼峰命名法，因此 border-radius 会变成 borderRadius 。

React 似乎推广了一些不仅在 React 中变得普遍的解决方案，例如最近集成在 CRA 中的 CSS 模块，你可以在其中简单地导入 name.modules.css 并用其属性来调整组件的样式（某些IDE（例如WebStorm）也具有自动完成功能，能告诉你可用的名称。

在 React 中另一个流行的解决方案是 CSS-in-JS（例如，emotion 库）。再说一点，CSS 模块和 emotion（或者一般来说是CSS-in-JS）对 React 没有限制。

React 中的 Hooks

自重写以来，Hooks 很可能是 React 最受热切期待的补充。这个产品是否能不负众望？从我的角度来看，是的，因为它确实是一个很棒的功能。它们本质上是带来了新的体验，例如：

•  允许删除许多 class 组件，这些组件我们仅仅是使用而不归我们拥有，例如本地状态或 ref，所以组件的代码看上去更容易阅读。
•  可以让你用更少的代码来获得相同的效果。
•  使函数更容易理解和测试，例如：用 react-testing-library。
•  也可以携带参数，一个 hook 返回的结果可以很容易地被另一个 hook 使用（例如，useEffect 中的 setState 被 useState 使用）。
•  比类更好地缩小方式，这对于 minifiers 来说往往更成问题。
•  可能会删除 HOC 并在你的应用中渲染 props ，尽管 hook 被设计用于解决其他问题，但仍会引入新问题。
  •   能够被熟练的React开发人员定制

默认的 React hook 很少。其中三个基本的hook是 useState，useEffect 和 useContext。还有一些其它的，例如 useRef 和 useMemo，不过现在我们把重点放在基础知识上。

先看一下 useState，让我们用它来创建一个简单的计数器的。它是如何工作的？基本上整个结构非常简单：

export function Counter() {  
 const [counter, setCounter] = React.useState(0);  
 return (  
   <div>  
     {counter}  
     <button onClick={() => setCounter(counter + 1)}>+</button>  
   </div>  
 );  
}; 

它用 initialState （值）调用，并返回一个带有两个元素的数组。由于数组解构分配，我们可以立即将变量分配给这些元素。第一个是更新后的最后一个状态，而另一个是我们将用于更新值的函数。看起来相当容易，不是吗？

此外，由于这些组件曾经被称为无状态功能组件，现在这种名称不再适用，因为它们可以具有如上所示的状态。所以叫类组件和函数组件似乎更符合它们的实际操作，至少从16.8.0开始。

更新函数（在我们的例子中是setCounter）也可以用作一个函数，它将以前的值作为参数，格式如下：

<button onClick={() => setCounter(prevCounter => prevCounter + 1)}>+</button>  
<button onClick={() => setCounter(prevCounter => prevCounter - 1)}>-</button> 

与执行浅合并的this.setState 类组件不同，设置函数（在我们的例子中为 setCounter ）会覆盖整个状态。

另外，initialState 也可以是一个函数，而不仅仅是一个普通的值。这有其自身的好处，因为该函数将会只在组件的初始渲染期间运行，之后将不再被调用。

const [counter, setCounter] = useState(() => calculateComplexInitialValue()); 

最后，如果我们要使用 setCounter 与在当前状态（counter）的同一时刻完全相同的值，那么组件 将不会 重新渲染。

另一方面，useEffect 为我们的功能组件添加副作用，无论是订阅、API调用、计时器、还是任何我们认为有用的东西。我们传给 useEffect 的任何函数都将在 render 之后运行，并且是在每次渲染之后执行，除非我们添加一个限制，把应该重新运行时需要更改的属性作为函数的第二个参数。如果我们只想在 mount 上运行它并在unmount 上清理，那么只需要在其中传递一个空数组。

const fetchApi = async () => {  
 const value = await fetch("https://jsonplaceholder.typicode.com/todos/1");  
 console.log(await value.json());  
};  
export function Counter() {  
 const [counter, setCounter] = useState(0);  
 useEffect(() => {  
   fetchApi();  
 }, []);  
 return (  
   <div>  
     {counter}  
     <button onClick={() => setCounter(prevCounter => prevCounter + 1)}>+</button>  
     <button onClick={() => setCounter(prevCounter => prevCounter - 1)}>-</button>  
   </div>  
 );  
}; 

（编辑：ASP站长网）