React的hooks

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

hooks-useState

返回一个 state，以及更新state的函数。

App.js

import React, { useState } from "react";

export default function App() {
	// 定义count和count的默认值和修改count的方法
	const [count, setCount] = useState(15);
	return (
		<div>
			<button
				onClick={() => {
					setCount((preCount) => preCount + 1);
				}}
			>
				+
			</button>
			<p>当前数是:{count}</p>
		</div>
	);
}

useEffect

该 Hook 接收一个包含命令式、且可能有副作用代码的函数。

App.js

import React, { useEffect } from "react";

export default function App() {
	useEffect(() => {
	    console.log("1111");
	    console.log(document.querySelector('span'))
	});
	return (
	    <div>
	      <span></span>
	    </div>
  )
}

useContext

接收一个 context 对象并返回该context的当前值。

context/index.js

import { createContext } from "react";

export const moneyContext = createContext(200)

App.js

import React, { useState } from "react";
import { moneyContext } from "./context";
import Father from "./Father";

export default function App() {
	const [money] = useState(2000);
	return (
		<div>
			<moneyContext.Provider value={money}>
				<Father></Father>
			</moneyContext.Provider>
		</div>
	);
}

Father.js

import React from 'react'
import Son from './Son'

export default function Father() {
  return (
    <div>
      <Son></Son>
    </div>
  )
}

Son.js

import React,{useContext} from 'react'
import {moneyContext} from './context'

export default function Son() {
  const money = useContext(moneyContext)
  return (
    <div>
      {money}
    </div>
  )
}