基于django的电子商务网站设计,网络媒体设计,网站模板登录模块,自己弄个网站要怎么弄前言 React Hooks在React v16.8正式稳定版中加入。 Hooks是什么? React Hooks 就是让你不必写class组件就可以用state和其他的React特性#xff1b;你也可以编写自己的hooks在不同的组件之间复用#xff1b;最近很多人都在谈论 React Hooks。当使用React类组件那么久#x…前言 React Hooks在React v16.8正式稳定版中加入。 Hooks是什么? React Hooks 就是让你不必写class组件就可以用state和其他的React特性你也可以编写自己的hooks在不同的组件之间复用 最近很多人都在谈论 React Hooks。当使用React类组件那么久使用React hooks需要一些观念转变。React官方团队明确表示他们将会据需支持类组件那为什么还要使用React Hooks呢 接下来是一个5分钟的例子将你带入hooks让我们一起了解吧。 例子 我们的例子是 一个按钮带有是否激活状态当点击的时候切换颜色。 开始 我们有一个简单的按钮组件我们想让他变的简单所以写了一个功能函数 const Button props {return (div classNamebutton onClick{props.onClick} {props.text}/div)
}
复制代码我们可以传递自定义的 onClick 事件 和 text属性。 但是如果我们想要当按钮激活改变其颜色要怎么办 假如我们已经有100个组件用了这个按钮我们不想再加其他属性颜色属性让按钮自己控制也足够简单。 转换到类 唯一的问题是我们将会需要一些状态。假设现在在hooks出现之前我们只能将其转换成class才能控制state。 class ButtonWithClass extends React.Component {state {active: false};render() {return (div className{this.state.active ? active-button : default-button}onClick{() { this.setState({active: !this.state.active}); this.props.onClick();}}{this.props.text}/div)}
}
复制代码我们有一个完全重写的组件加了2倍的代码行我们想要的只是一点状态。你的代 码 PR 校验人会看到很多红色和绿色的git修改明细。没有人会喜欢圣诞主题的红绿色Pull Request。 Hooks将会拯救你 添加Hooks 当我们用React Hooks执行完全相同的操作时会发生什么 import React, {useState} from react;const ButtonWithHooks props {const [active, setActive] useState(false); // ***return (div className{active ? active-button : default-button} //*onClick{() {setActive(!active); // ***props.onClick();}}{props.text}/div)};
复制代码这个组件我们没有重写任何东西。我们做的就是添加了一点行数 并更新了 onCLick 函数我们得到了与class版本相同的结果。我们的PR 查看者会开心添加state只需下面这一行 const [active setActive] useState(fasle); 重构 但是等等为什么按钮控制自己的状态我们改变下我们想让那个组件简单让我们看起来聪明。 我们让 active 变成一个被父组件控制的prop。没问题用React Hooks 仅移处带**的两行 和 带号的那一行的一部分。 如此简单但是class装换成function会更复杂。 当你把组件装换成函数时你可能很受挫。查看你代码的人又变成另外一个红绿色。即使实际的变化很小你将会感到很沮丧。 总结 React Hooks 让你的功能函数作为一个函数并挂钩到React 特定功能。这就是他如此简单如此强大。这是React Hooks的一些好处大多数已经覆盖到了我只想分享我认为收益最明显的地方 重写不用移处或添加state仅删除、添加行用useEffects不用记生命周期方法不像class组件的state可自定义和跨组件重用。更干净的代码没有重大变化blog.usejournal.com/why-bother-… 转载于:https://juejin.im/post/5cfdba4be51d4577596486d1
