在{this.state.短语}在
此设置状态({短语:this.state.短语+"蓝色"})}>露出颜色!);}}ReactDOM.render(,文档.getElementById("根");上面代码的代码沙盒可以在这里找到。在这个例子中,我们声明我们的状态为短语"我最喜欢的颜色是"。然后我们创建一个按钮,当点击时,激活setState并在短语中添加字符串"Blue"。此组件的输出如下所示:一旦点击按钮,我们会看到:使用React hook可以看到什么状态如果我们从类组件中获取相同的逻辑,将其放入一个功能组件中,然后使用React钩子,我们可以删除大量代码行。让我们看看会是什么样子。//代码17行导入React,{useState}来自"React";从"react-dom"导入ReactDOM;函数HooksExample(){const[phrase,setPhrase]=useState("我最喜欢的颜色是");返回({短语}
设置短语(短语+"蓝色")}>露出颜色!);}ReactDOM.render(,文档.getElementById("根");上面代码的代码沙盒可以在这里找到。我们在这里看到的是不同的,非常不同的状态。除了关键字useState,我们根本看不到state被使用。在这一行中:const[phrase,setPhrase]=useState("我最喜欢的颜色是");我们的州就在这里。两个值phrase和setPhrase是占位符。我们还看到了一个新特性useState。短语等于这个州.设置短语等于此设置状态.useState将是我们的初始状态值。通过在呈现的React元素中使用setPhrase,我们可以设置一个新的状态值,并在单击按钮后显示最喜欢的颜色。这两个示例之间的行数相差7行,但这可能会随着组件的不同而增加。但最大的区别是我们现在可以在一行中声明我们的州!我们可以为单个函数调用替换类构造函数。再看一下useState,这是一个钩子,它允许我们向我们的功能组件添加in-state。你可以在这里的React文档中了解更多信息!另外,请注意,在Hooks示例中,它是一个功能组件。在功能组件中使用状态,谁会想到!为什么是方括号?这是使用JavaScript语法"array destructuring"。数组破坏是指我们能够从数组中"解包"值并将它们分配给变量。我们知道这两个变量的名称,然后用它们来表示。一旦设置了这两个变量,useState将能够映射这些值,并知道第一个值的名称为phrase,第二个值的名称为setPhrase。const[firstvalue,secondvalue]=useState(0);多状态挂钩想在一个组件中使用不止一个状态钩子吗?React允许在一个组件中使用多个状态挂钩:函数LotsOfStates(){const[name,setName]=useState("Sarah");const[color,setColor]=useState("蓝色");const[shopping,setList]=useState([{item:"杏仁奶"}]);我们可以给特定的州起不同的名字,这样事情就有条理了。我们给它起一个名字,比如,颜色或者购物,这样我们就知道我们在和哪一个合作。特效钩React Hooks的另一个出色特性是useEffect的使用。这将处理我们希望在React代码中使用的生命周期方法。以下代码基于React文档中提供的示例:从"react"导入{useState,useEffect};函数示例(){const[count,setCount]=useState(0);//与componentDidMount和componentDidUpdate类似:使用效果(()=>{//使用浏览器API更新文档标题文件名称=`您单击了${count}次`;});返回(
本文地址: /shichang/14324.html
版权声明:本文发布于收集站云 内容均来源于互联网 如有侵权联系删除