這是快速反應(yīng)的練習(xí)，用于確定某些關(guān)鍵前端概念的用法。本教程將涵蓋以下反應(yīng)掛鉤：

• useState

• useRef

• useEffect

一個有趣的創(chuàng)意項(xiàng)目，它應(yīng)該可以幫助您掌握狀態(tài)和JSX語法的實(shí)用性。

第1步-模板

進(jìn)入您的項(xiàng)目文件夾并運(yùn)行以下終端命令

npm i -g create-react-appnpx create-react-app color-selectornpm i bootstrap

在您的項(xiàng)目文件夾中，您應(yīng)該看到帶有/ src和/ public文件夾的react-app模板。

第2步-JSX

我們必須創(chuàng)建類似HTML的語法，以幫助我們的用戶與HTML中的CSS color屬性進(jìn)行交互。我們將使用rgb（）顏色值和范圍滑塊輸入。

<main class='main'>
    <div class="card" style="width: 22rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Welcome to the React Color Picker! Find the code for any color, or play with the scrubbers below to find your favourite color!</p>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item"><input type="range" min="0" max="255" value="50" class="red" id="red"></li>
          <li class="list-group-item"><input type="range" min="0" max="255" value="50" class="slider" id="green"></li>
          <li class="list-group-item"><input type="range" min="0" max="255" value="50" class="slider" id="blue"></li>
        </ul>
        <div class="card-body row text-center">
          <p class="card-text col" id="rgb">Sample Text</p>
          <p class="card-text col">#<span id="hexcode">SAMPLETXT</span></p>
        </div>
      </div></main>

還有我們的CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;}.main {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;}

第3步-反應(yīng)功能

我們想在react VDOM中更改顏色，這意味著我們將需要useState捕獲狀態(tài)變化的react方法。

在您的App.js文件中導(dǎo)入并編寫以下內(nèi)容

import React, {useState, useRef, useEffect} from 'react';import './App.css';import 'bootstrap/dist/css/bootstrap.min.css';function App() {
  const [red, setRed] = useState(0);
  const [green, setGreen] = useState(0);
  const [blue, setBlue] = useState(0);}export default App

使用我們的顏色設(shè)置的初始值，我們必須以某種持久且不會影響狀態(tài)的方式捕獲紅色，綠色和藍(lán)色的結(jié)果。實(shí)現(xiàn)useRef（）函數(shù)可以幫助您完成此任務(wù)。

const color = useRef(`rgb(${red},${green},${blue})`);

很好，但是如果我們可以將其附加到正確的DOM上，那真的看起來很棒。useRef會設(shè)置我們的顏色值，但是每次重新渲染時(shí)都必須要有一些方法來進(jìn)行更改。useEffect（）將有助于將副作用添加到DOM

  useEffect(()=>{
    color.current = `rgb(${red},${green},${blue})`;
  })

并確保使用useRef Hook的.current值修改JSX。

<main className='main' style={{backgroundColor: color.current}}>

將所有內(nèi)容放在一起，我們應(yīng)該在App.js文件中獲得以下內(nèi)容。另外，我添加了一個將RGB轉(zhuǎn)換為Hexcode的功能，但這是額外的功勞。

import React, {useState, useRef, useEffect} from 'react';import './App.css';import 'bootstrap/dist/css/bootstrap.min.css';function App() {
  const [red, setRed] = useState(0);
  const [green, setGreen] = useState(0);
  const [blue, setBlue] = useState(0);
  const color = useRef(`rgb(${red},${green},${blue})`);
  const hexList = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
  function findHexCode(num){
    let firstVal,secondVal;
    firstVal = Math.floor(num/16);
    let diff = (num/16 - firstVal);
    secondVal = Math.floor(diff.toFixed(2)*16);
    let colrCode = `${hexList[firstVal]}${hexList[secondVal]}`;
    return colrCode;
  }
  useEffect(()=>{
    color.current = `rgb(${red},${green},${blue})`;
  })
  return (
    <>
    <main className='main' style={{backgroundColor: color.current}}>
        <div className="card" style={{width: '22rem'}}>
            <div className="card-body">
              <h3 className="card-title">React Color App</h3>              <p className="card-text">Welcome to the React Color Picker! Find the code for any color, or play with the scrubbers below to find your favourite color!</p>            </div>            <ul className="list-group list-group-flush">
              <li className="list-group-item"><input type="range" onChange={(e)=>{setRed(e.target.value)}} min="0" max="255" value={red}/><label className="text-danger px-3"><b>Red</b></label></li>
              <li className="list-group-item"><input type="range" onChange={(e)=>{setGreen(e.target.value)}} min="0" max="255" value={green}/><label className="text-success px-3"><b>Green</b></label></li>
              <li className="list-group-item"><input type="range" onChange={(e)=>{setBlue(e.target.value)}} min="0" max="255" value={blue}/><label className="text-primary px-3"><b>Blue</b></label></li>
            </ul>            <div className="card-body row text-center">
              <p className="card-text col h5" id="rgb">{`rgb(${red},${green},${blue})`}</p>              <p className="card-text col h5">#<span id="hexcode">{findHexCode(red)+findHexCode(green)+findHexCode(blue)}</span></p>
            </div>          </div>      </main>      </>  );}export default App;

而我們的最終產(chǎn)品，當(dāng)我們運(yùn)行npm install和npm start看起來應(yīng)該像：

這是一個很棒的入門項(xiàng)目，它克服了使用React Hooks的障礙。我知道從普通的JavaScript跳入框架有多么困難。證明您知道該知識是停止自我批評，獲得編碼并取得更高成就的最佳方法！謝謝閱讀！