P01:React Hooks介绍及环境搭建
React Hooks 简介
2018年底FaceBook的React小组推出Hooks以来,所有的React的开发者都对它大为赞赏。React Hooks
就是用函数的形式代替原来的继承类的形式,并且使用预函数的形式管理state
,有Hooks可以不再使用类的形式定义组件了。这时候你的认知也要发生变化了,原来把组件分为有状态组件和无状态组件,有状态组件用类的形式声明,无状态组件用函数的形式声明。那现在所有的组件都可以用函数来声明了。
2019年React Hooks是React生态圈里边最火的新特性了。它改变了原始的React类的开发方式,改用了函数形式;它改变了复杂的状态操作形式,让程序员用起来更轻松;它改变了一个状态组件的复用性,让组件的复用性大大增加。
我们这里先不说Hooks有什么好处,先学习,学过几节内容后,我们再来总结React Hooks
的好处。
使用create-react-app
创建项目
我在D盘新建一个ReactHooksDemo
的文件夹,然后在文件夹中用create-react-app
创建一个demo01的项目。
D: // 进入D盘 mkdir ReactHooksDemo cd ReactHooksDemo create-react-app demo01
只留/src/index.js
文件,然后把里边的代码删减成下面的样子:
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(<App />, document.getElementById('root'));
React Hooks 编写形式对比
这样就算开发环境搭建完成了,接下来我们对比一下原始的写法和现在有了React Hooks的写法。
先来写一个最简单的有状态组件,点我们点击按钮时,点击数量不断增加。
原始写法:
import React, { Component } from 'react'; class Example extends Component { constructor(props) { super(props); this.state = { count:0 } } render() { return ( <div> <p>You clicked {this.state.count} times</p> <button onClick={this.addCount.bind(this)}>Chlick me</button> </div> ); } addCount(){ this.setState({count:this.state.count+1}) } } export default Example;
React Hooks 写法:
import React, { useState } from 'react'; function Example(){ const [ count , setCount ] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={()=>{setCount(count+1)}}>click me</button> </div> ) } export default Example;
从这两个程序的对比上可以看出Hooks本质上就是一类特殊的函数,他们可以为你的函数型组件(function component)注入一些特殊的功能。这听起来有点像以前React中的Mixins
差不多哦。其实是由很多不同,hooks的目的就是让你不再写class
,让function
一统江湖。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P01:React Hooks介绍及环境搭建
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P01:React Hooks介绍及环境搭建