react-hook 学习笔记

时间 2019-11-08

标签 react hook 学习笔记栏目 React 繁體版

原文原文链接

React Hook

Hook 是 React 16.8 的新增特性。它能够让你在不编写 class 的状况下使用 state 以及其余的 React 特性。css

demo01 useState

demo01

React 是支持函数式编程的可是彻底的函数式编程在这以前还没法作到。html

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

useState 能够让咱们在不使用 class 的状况下编写有状态组件。react

例如:webpack

// 引入 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')) 复制代码

运行效果:git

在线浏览:github

react-hook-useStateweb

环境搭建

全局环境npm

下载nodejs编程
使用 npm 全局安装 webpack-cli

sudo npm i webpack-cli -g
复制代码

全局安装 webpack 和 webpack-dev-server

sudo npm i webpack webpack-dev-server -g
复制代码

安装局部依赖

{
  "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
复制代码

新建 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>
复制代码

编写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'
    })
  ]
}
复制代码

原文连接

(完)