React ​

import React, { useState, Component } from "react";
import { Checkbox, Button, Input } from "antd";

const ThemeContext: any = React.createContext(null); 

//主题颜色
const theme = {
	dark: {
	color: "#5B8FF9",
	background: "#5B8FF9",
	border: "1px solid #5B8FF9",
	type: "dark",
	buttomType: "primary",
	},
	light: {
	color: "#E86452",
	background: "#E86452",
	border: "1px solid #E86452",
	type: "light",
	buttomType: "default",
	},
};

const Index: React.FC<any> = () => {
	const [themeContextValue, setThemeContext] = useState(theme.dark);

	return (
	<ThemeContext.Provider
		value={{ ...themeContextValue, setTheme: setThemeContext }}
	>
		<Child />
	</ThemeContext.Provider>
	);
};

class Child extends Component<any, any> {
	static contextType = ThemeContext;
	render() {
	const { border, setTheme, color, background, buttomType }: any =
		this.context;
	return (
		<div style={{ border, color, padding: 20 }}>
		<div>
			<span> 选择主题： </span>
			<CheckboxView
			label="主题1"
			name="dark"
			onChange={() => setTheme(theme.dark)}
			/>
			<CheckboxView
			label="主题2"
			name="light"
			onChange={() => setTheme(theme.light)}
			/>
		</div>
		<div style={{ color, marginTop: 8 }}>
			大家好，我是小杜杜，一起玩转Hooks吧！
		</div>
		<div style={{ marginTop: 8 }}>
			<Input
			placeholder="请输入你的名字"
			style={{ color, border, marginBottom: 10 }}
			/>
			<Button type={buttomType}>提交</Button>
		</div>
		</div>
	);
	}
}

class CheckboxView extends Component<any, any> {
	static contextType = ThemeContext;

	render() {
	const { label, name, onChange } = this.props;
	const { color, type }: any = this.context;

	return (
		<div
		style={{
			display: "inline-block",
			marginLeft: 10,
		}}
		>
		<Checkbox checked={type === name} style={{ color }} onChange={onChange}>
			{label}
		</Checkbox>
		</div>
	);
	}
}

export default Index;

import React from "react";
import { Button } from "antd";

class Child extends React.Component<any, any> {
	constructor(props: any) {
	super(props);
	this.state = {
		msg: "大家好，我是小杜杜，一起玩转Hooks吧！",
	};
	}

	speak() {
	console.log("Child中的speak");
	}

	render() {
	return (
		<>
		<div>{this.state.msg}</div>
		<Button type="primary" onClick={() => this.speak()}>
			查看控制台
		</Button>
		</>
	);
	}
}

class Index extends Child {
	speak() {
	console.log("extends 模式，强化后会替代Child的speak方法");
	}
}

export default Index;

import React, { useState } from "react";
import { Button } from "antd";

const HOC = (Component: any) => (props: any) => {
	return (
	<Component
		name={"大家好，我是小杜杜，一起玩转Hooks吧！"}
		{...props}
	></Component>
	);
};

const Index: React.FC<any> = (props) => {
	const [flag, setFlag] = useState<boolean>(false);

	return (
	<div>
		<Button type="primary" onClick={() => setFlag(true)}>
		获取props
		</Button>
		{flag && <div>{JSON.stringify(props)}</div>}
	</div>
	);
};

export default HOC(Index);

import { useState } from "react";
import { Button } from "antd";

const Index: React.FC<any> = () => {
  	const [count, setCount] = useState<number>(0);

  	return (
    <>
      	<div>数字：{count}</div>
    	<Button type="primary" onClick={() => setCount(count + 1)}>
        	第一种方式+1
    	</Button>
    	<Button
        	type="primary"
        	style={{ marginLeft: 10 }}
        	onClick={() => setCount((v) => v + 1)}
      	>
        第二种方式+1
    	</Button>
    </>
  	);
};

export default Index;

import { useState } from "react";
import { Button } from "antd";

const Index: React.FC<any> = () => {
  const [state, setState] = useState({ number: 0 });
  let [count, setCount] = useState(0);

  return (
    <>
      <div>数字形式：{count}</div>
      <Button
        type="primary"
        onClick={() => {
          count++;
          setCount(count);
        }}
      >
        点击+1
      </Button>
      <div>对象形式：{state.number}</div>
      <Button
        type="primary"
        onClick={() => {
          state.number++;
          setState(state);
        }}
      >
        点击+1
      </Button>
    </>
  );
};

export default Index;

import { useState, useEffect } from "react";
import { Button } from "antd";

const Child = () => {
  useEffect(() => {
    console.log("挂载");

    return () => {
      console.log("卸载");
    };
  }, []);

  return <div>大家好，我是小杜杜，一起学习hooks吧！</div>;
};

const Index: React.FC<any> = () => {
  const [flag, setFlag] = useState(false);

  return (
    <>
      <Button
        type="primary"
        onClick={() => {
          setFlag((v) => !v);
        }}
      >
        {flag ? "卸载" : "挂载"}
      </Button>
      {flag && <Child />}
    </>
  );
};

export default Index;

import { useState, useEffect } from "react";
import { Button } from "antd";

const Index: React.FC<any> = () => {
  const [number, setNumber] = useState(0);
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("count改变才会执行");
  }, [count]);

  return (
    <>
      <div>
        number: {number} count: {count}
      </div>
      <Button type="primary" onClick={() => setNumber((v) => v + 1)}>
        number + 1
      </Button>
      <Button
        type="primary"
        style={{ marginLeft: 10 }}
        onClick={() => setCount((v) => v + 1)}
      >
        count + 1
      </Button>
    </>
  );
};

export default Index;

import { useState, useEffect } from "react";
import { Button } from "antd";

const Index: React.FC<any> = () => {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  useEffect(() => {
    console.log("大家好，我是小杜杜，一起学习hooks吧！");
  });

  return (
    <>
      <Button type="primary" onClick={() => setCount((v) => v + 1)}>
        数字加一：{count}
      </Button>
      <Button
        type="primary"
        style={{ marginLeft: 10 }}
        onClick={() => setFlag((v) => !v)}
      >
        状态切换：{JSON.stringify(flag)}
      </Button>
    </>
  );
};

export default Index;

import { useState, createContext, useContext } from "react";
import { Button } from "antd";

const CountContext = createContext(-1);

const Child = () => {
  const count = useContext(CountContext);

  return (
    <div style={{ marginTop: 10 }}>
      子组件获取到的count: {count}
      <Son />
    </div>
  );
};

const Son = () => {
  const count = useContext(CountContext);

  return <div style={{ marginTop: 10 }}>孙组件获取到的count: {count}</div>;
};

const Index: React.FC<any> = () => {
  let [count, setCount] = useState(0);

  return (
    <>
      <div>父组件中的count：{count}</div>
      <Button type="primary" onClick={() => setCount((v) => v + 1)}>
        点击+1
      </Button>
      <CountContext.Provider value={count}>
        <Child />
      </CountContext.Provider>
    </>
  );
};

export default Index;

import { useReducer } from "react";
import { Button } from "antd";

const Index: React.FC<any> = () => {
  const [count, dispatch] = useReducer((state: number, action: any) => {
    switch (action?.type) {
      case "add":
        return state + action?.payload;
      case "sub":
        return state - action?.payload;
      default:
        return state;
    }
  }, 0);

  return (
    <>
      <div>count：{count}</div>
      <Button
        type="primary"
        onClick={() => dispatch({ type: "add", payload: 1 })}
      >
        加1
      </Button>
      <Button
        type="primary"
        style={{ marginLeft: 10 }}
        onClick={() => dispatch({ type: "sub", payload: 1 })}
      >
        减1
      </Button>
    </>
  );
};

export default Index;

const Index: React.FC<any> = () => {
  console.log("父组件发生更新");
  ...
  return (
    <>
        ...
      <Button
        type="primary"
        style={{ marginLeft: 10 }}
        onClick={() => dispatch({ type: "no", payload: 1 })}
      >
        无关按钮
      </Button>
      <Child count={count} />
    </>
  )
};

const Child: React.FC<any> = ({ count }) => {
  console.log("子组件发生更新");
  return <div>在子组件的count：{count}</div>;
};

import { useState } from "react";
import { Button } from "antd";

const usePow = (list: number[]) => {
  return list.map((item: number) => {
    console.log("我是usePow");
    return Math.pow(item, 2);
  });
};

const Index: React.FC<any> = () => {
  let [flag, setFlag] = useState(true);

  const data = usePow([1, 2, 3]);

  return (
    <>
      <div>数字集合：{JSON.stringify(data)}</div>
      <Button type="primary" onClick={() => setFlag((v) => !v)}>
        状态切换{JSON.stringify(flag)}
      </Button>
    </>
  );
};

export default Index;

import { useState, useCallback, memo } from "react";
import { Button } from "antd";

const Index: React.FC<any> = () => {
  let [count, setCount] = useState(0);
  let [flag, setFlag] = useState(true);

  const add = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <>
      <TestButton onClick={() => setCount((v) => v + 1)}>普通点击</TestButton>
      <TestButton onClick={add}>useCallback点击</TestButton>
      <div>数字：{count}</div>
      <Button type="primary" onClick={() => setFlag((v) => !v)}>
        切换{JSON.stringify(flag)}
      </Button>
    </>
  );
};

const TestButton = memo(({ children, onClick = () => {} }: any) => {
  console.log(children);
  return (
    <Button
      type="primary"
      onClick={onClick}
      style={children === "useCallback点击" ? { marginLeft: 10 } : undefined}
    >
      {children}
    </Button>
  );
});

export default Index;

import { useState, useRef } from "react";

const Index: React.FC<any> = () => {
  	const scrollRef = useRef<any>(null);
  	const [clientHeight, setClientHeight] = useState<number>(0);
  	const [scrollTop, setScrollTop] = useState<number>(0);
  	const [scrollHeight, setScrollHeight] = useState<number>(0);

  	const onScroll = () => {
    	if (scrollRef?.current) {
      		let clientHeight = scrollRef?.current.clientHeight; //可视区域高度
      		let scrollTop = scrollRef?.current.scrollTop; //滚动条滚动高度
      		let scrollHeight = scrollRef?.current.scrollHeight; //滚动内容高度
      		setClientHeight(clientHeight);
      		setScrollTop(scrollTop);
      		setScrollHeight(scrollHeight);
    	}
  	};

  	return (
    	<>
      		<div>
        		<p>可视区域高度：{clientHeight}</p>
        		<p>滚动条滚动高度：{scrollTop}</p>
        		<p>滚动内容高度：{scrollHeight}</p>
      		</div>
      		<div
        		style={{ height: 200, border: "1px solid #000", overflowY: "auto" }}
        		ref={scrollRef}
        		onScroll={onScroll}
      		>
        		<div style={{ height: 2000 }}></div>
      		</div>
    	</>
  	)
}

export default Index;

import { useState, useRef, useImperativeHandle } from "react";
import { Button } from "antd";

const Child = ({cRef}:any) => {

  const [count, setCount] = useState(0)

  useImperativeHandle(cRef, () => ({
    add
  }))

  const add = () => {
    setCount((v) => v + 1)
  }

  return <div>
    <p>点击次数：{count}</p>
    <Button onClick={() => add()}> 子组件的按钮，点击+1</Button>
  </div>
}

const Index: React.FC<any> = () => {
  const ref = useRef<any>(null)

  return (
    <>
      <div>大家好，我是小杜杜，一起学习hooks吧！</div>
      <div></div>
      <Button
        type="primary"
        onClick={() =>  ref.current.add()}
      >
        父组件上的按钮，点击+1
      </Button>
      <Child cRef={ref} />
    </>
  );
};

export default Index;

import { useState, useRef, useImperativeHandle, Component, forwardRef } from "react";
import { Button } from "antd";

const Child = (props:any, ref:any) => {

  const [count, setCount] = useState(0)

  useImperativeHandle(ref, () => ({
    add
  }))

  const add = () => {
    setCount((v) => v + 1)
  }

  return <div>
    <p>点击次数：{count}</p>
    <Button onClick={() => add()}> 子组件的按钮，点击+1</Button>
  </div>
}

const ForwardChild = forwardRef(Child)

class Index extends Component{
  countRef:any = null
  render(){
    return   <>
      <div>大家好，我是小杜杜，一起学习hooks吧！</div>
      <div></div>
      <Button
        type="primary"
        onClick={() => this.countRef.add()}
      >
        父组件上的按钮，点击+1
      </Button>
      <ForwardChild ref={node => this.countRef = node} />
    </>
  }
}

export default Index;

import { useState, useEffect, useLayoutEffect } from "react";

const Index: React.FC<any> = () => {
  let [count, setCount] = useState(0);
  let [count1, setCount1] = useState(0);

  useEffect(() => {
    if(count === 0){
      setCount(10 + Math.random() * 100)
    }
  }, [count])

  useLayoutEffect(() => {
    if(count1 === 0){
      setCount1(10 + Math.random() * 100)
    }
  }, [count1])

  return (
    <>
      <div>大家好，我是小杜杜，一起玩转Hooks吧！</div>
      <div>useEffect的count:{count}</div>
      <div>useLayoutEffect的count:{count1}</div>
    </>
  );
};

export default Index;

import { useSyncExternalStore } from "react";
import { Button } from "antd";
import { combineReducers, createStore } from "redux";

const reducer = (state: number = 1, action: any) => {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "DEL":
      return state - 1;
    default:
      return state;
  }
};

/* 注册reducer,并创建store */
const rootReducer = combineReducers({ count: reducer });
const store = createStore(rootReducer, { count: 1 });

const Index: React.FC<any> = () => {
  //订阅
  const state = useSyncExternalStore(
    store.subscribe,
    () => store.getState().count
  );

  return (
    <>
      <div>大家好，我是小杜杜，一起玩转Hooks吧！</div>
      <div>数据源： {state}</div>
      <Button type="primary" onClick={() => store.dispatch({ type: "ADD" })}>
        加1
      </Button>
      <Button
        style={{ marginLeft: 8 }}
        onClick={() => store.dispatch({ type: "DEL" })}
      >
        减1
      </Button>
    </>
  );
};

export default Index;

import { useState, useTransition } from "react";
import { Input } from "antd";

const Index: React.FC<any> = () => {
  const [isPending, startTransition] = useTransition();
  const [input, setInput] = useState("");
  const [list, setList] = useState<string[]>([]);

  return (
    <>
      <div>大家好，我是小杜杜，一起玩转Hooks吧！</div>
      <Input
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
          startTransition(() => {
            const res: string[] = [];
            for (let i = 0; i < 10000; i++) {
              res.push(e.target.value);
            }
            setList(res);
          });
        }}
      />
      {isPending ? (
        <div>加载中...</div>
      ) : (
        list.map((item, index) => <div key={index}>{item}</div>)
      )}
    </>
  );
};

export default Index;

import { useState, useDeferredValue } from "react";
import { Input } from "antd";

const getList = (key: any) => {
  const arr = [];
  for (let i = 0; i < 10000; i++) {
    if (String(i).includes(key)) {
      arr.push(<li key={i}>{i}</li>);
    }
  }
  return arr;
};

const Index: React.FC<any> = () => {
  //订阅
  const [input, setInput] = useState("");
  const deferredValue = useDeferredValue(input);
  console.log("value：", input);
  console.log("deferredValue：", deferredValue);

  return (
    <>
      <div>大家好，我是小杜杜，一起玩转Hooks吧！</div>
      <Input value={input} onChange={(e: any) => setInput(e.target.value)} />
      <div>
        <ul>{deferredValue ? getList(deferredValue) : null}</ul>
      </div>
    </>
  );
};

export default Index;

import { useInsertionEffect } from "react";

const Index: React.FC<any> = () => {
  useInsertionEffect(() => {
    const style = document.createElement("style");
    style.innerHTML = `
      .css-in-js{
        color: blue;
      }
    `;
    document.head.appendChild(style);
  }, []);

  return (
    <div>
      <div className="css-in-js">大家好，我是小杜杜，一起玩转Hooks吧！</div>
    </div>
  );
};

export default Index;

import { useId } from "react";

const Index: React.FC<any> = () => {
  const id = useId();

  return <div id={id}>大家好，我是小杜杜，一起玩转Hooks吧！</div>;
};

export default Index;