React教程：组件，Hooks和机能

起首，通例 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>  
 );  
}; 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!