React Hooks新手入门教程

"Hooks 到底是个啥玩意儿???"

你是不是有这样的疑惑?在你自认为已经了解了差不多 React 所有的内容的时候，Hooks 就这么出现了。

这就是前端开发人员的日常，技术从未停止更新。

学习新东西是一件很棒的事情吗?当然是!但有的时候我们又不得不思考：”为什么要学它?这个新东西有啥意义?我是必须得学他吗?“。

针对Hooks而言，上面的这个问题答案是否定的，你不需要立马就学它。如果您一直在使用 React，并且迄今为止一直在使用基于类的组件，那么就不必急于转向 Hooks。Hooks 是可选的，可以与现有组件配合使用。我相信当你因为要使用新东西而不得不重写整个代码库，你整个人都是崩溃的。

import React, { Component } from 'react';
import './styles.css';

class Counter extends Component {
 state = {
  count: this.props.initialValue,
 };

 setCount = () => {
  this.setState({ count: this.state.count + 1 });
 };

 render() {
  return (
   <div>
    <h2>This is a counter using a class</h2>
    <h1>{this.state.count}</h1>

    <button onClick={this.setCount}>Click to Increment</button>
   </div>
  );
 }
}

export default Counter;

import React, { useState } from 'react';

function CounterWithHooks(props) {
 const [count, setCount] = useState(props.initialValue);

 return (
  <div>
   <h2>This is a counter using hooks</h2>
   <h1>{count}</h1>
   <button onClick={() => setCount(count + 1)}>Click to Increment</button>
  </div>
 );
}

export default CounterWithHooks;

function CounterWithHooks() {
 const [count, setCount] = useState();

 return (
  <div>
   <h2>This is a counter using hooks</h2>
   <h1>{count}</h1>
   <button onClick={() => setCount(count + 1)}>Click to Increment</button>
  </div>
 );
}

const [count, setCount] = useState(props.initialValue);

const [count, setCount] = useState(props.initialValue);

const [title, setTitle] = useState("This is my title");

const [age, setAge] = useState(25);

import React, { Component } from 'react';

class App extends Component {
 componentDidMount() {
  console.log('I have just mounted!');
 }

 render() {
  return <div>Insert JSX here</div>;
 }
}

function App() {
 useEffect(() => {
  console.log('I have just mounted!');
 });

 return <div>Insert JSX here</div>;
}

useEffect(() => {
 console.log('This only runs once');
}, []);

const [name, setName] = useState("Chris");

 useEffect(() => {
    console.log("The name state variable has changed!");
 }, [name]);

const [name, setName] = useState("Chris");

 useEffect(() => {
    console.log("Something has changed!");
 }, [name, props.name]);

 console.log('running effect');

 return () => {
  console.log('unmounting');
 };
});

function App = () => {
    const [name, setName] = useState();
    const [age, setAge] = useState();

 useEffect(()=>{
    console.log("component has changed");
 }, [name, age])

 return(
    <div>Some jsx here...<div>
 )
}