1. 首页
  2. Reactjs

react-hook 学习笔记

React Hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

  1. demo01 useState

demo01

React 是支持函数式编程的但是完全的函数式编程在这之前还无法做到。

比如需要用到 state 的时候就不能用纯函数组件,必须使用 class 来声明组件。

useState 可以让我们在不使用 class 的情况下编写有状态组件。

例如:

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文手册
专注分享前端知识,你想要的,在这里都能找到


// 引入 React 以及 useState import React, { useState } from 'react'; import ReactDOM from 'react-dom'; function App() { // 'Hello World!' 是一个名为 text 的常量 (Model) 我们期望由它得到的是 <div>Hello World!</div> (View)。 // setText 是修改 text 的唯一方式 text 一旦被修改 意味着对应的 View 也就随之变化。 const [text, setText] = useState('Hello World!'); let inputText = ''; return ( <div> <div>{text}</div> <input onInput={(event)=>{inputText = event.target.value}}/> <button onClick={()=>{ setText(inputText) }}>Change text</button> </div> ) } ReactDOM.render(<App/>, document.getElementById('root'))

运行效果:

react-hook 学习笔记

在线浏览:

react-hook-useState

环境搭建

全局环境

  1. 下载nodejs

  2. 使用 npm 全局安装 webpack-cli


sudo npm i webpack-cli -g
  1. 全局安装 webpack 和 webpack-dev-server

sudo npm i webpack webpack-dev-server -g
  1. 安装局部依赖

{ "devDependencies": { "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.6", "css-loader": "^3.2.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "style-loader": "^1.0.0", "webpack": "^4.39.3", "webpack-cli": "^3.3.7", "webpack-dev-server": "^3.8.0" }, "dependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" } }

npm i @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server -D

npm i react react-dom -S
  1. 新建 app.jsx 以及 index.html

app.jsx


import React, {/* Your code */} from 'react'; import ReactDOM from 'react-dom'; function App() { /* Your code */ return ( <div> { /* Your code */ } </div> ) } ReactDOM.render(<App/>, document.getElementById('root'))

index.html


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="root"></div> </body> </html>
  1. 编写webpack.config.js

const path = require('path') const resolve = dir => path.resolve(__dirname,dir) const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:'./app.jsx', output:{ path: resolve('dist'), filename: 'bundle.js' }, module:{ rules:[ { test: /\.jsx?$/, use:[ { loader:'babel-loader', options:{ presets:[ '@babel/env', '@babel/react' ] } } ] }, { test: /\.html$/, use:['html-loader'] }, { test: /\.css$/, use:['style-loader','css-loader'] }, { test: /\.(png|jpe?g|gif|svg|mp4|webm|ogg|mp3|wav|flac|aac|woff2?|eot|ttf|otf)/, use:[{ loader:'url-loader' options:{ limit:10000 } }] } ], }, devServer:{ contentBase:__dirname, port:3000, open:'http://localhost:3000', }, plugins:[ new HtmlWebpackPlugin({ template:'./index.html' }) ] }

原文链接

(完)

作者:PanShanShan
链接:https://juejin.im/post/5d67f52bf265da03e83b8137

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:react-hook 学习笔记

链接:https://www.javascriptc.com/3790.html

« 亿级前端项目中的 3D 技术:支付宝 2020 年新春活动的背后
全链路压测在大搜车的探索与实践»
Flutter 中文教程资源

相关推荐

QR code