React快速上手 #

// 像这样哩
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

// 举个栗子：
// 路径：src/App.js
function App() {
  const name = "爱吃肉的年"
  return (
    <div className="App">
      <h2>{name}</h2>
    </div>
  );
}
export default App;

// 举个栗子
function App() {
	const taskList = [
		{ id: 1, name: "吃饭" },
		{ id: 2, name: "睡觉" },
		{ id: 3, name: "打豆豆" },
	];
	return (
		<div className="App">
			<ul>
        		{/* 重要 */}	
				{taskList.map((item) => (
					<li key={item.id}>{item.name}</li>
				))}
			</ul>
		</div>
	);
}
export default App;

// 举个栗子
function App() {
	// 来个flag变量
	const flag = true;
	return (
		<div className="App">
			{/* 三元表达式条件渲染字符串 */}
			{flag ? "React真有趣" : "Vue真有趣"}
			{/* &&条件渲染*/}
			{flag && <div>我要吃肉</div>}
			{/* 条件渲染标签or组件 */}
			{flag ? <div>this is div</div> : null}
		</div>
	);
}
export default App;

// App.js
import './app.css'
function App() {
  const showTitle = true
  return (
    <div className="App">
      <div className={ showTitle ? 'title' : ''}>this is a div</div>
    </div>
  )
}
export default App

// 创建Hello.js
// 引入React
import React from 'react'
// 定义类组件
export default class Hello extends React.Component {
  // 继承React.Component的render函数
  render () {
    return <div>I am Hello</div>
  }
}

// App.js
import Hello from "./Hello";
function App() {
	return (
		<div className="App">
			<Hello></Hello>
		</div>
	);
}
export default App;

// Counter.js
import React from "react";
export default class Counter extends React.Component {
	constructor(props) {
        // super方法
		super(props);
        // 定义状态
        // 语法：this.state = {数据}
		this.state = {
			count: 0,
		};
	}
	render() {
		return <button>{this.state.count}</button>;
	}
}

// 在App.js中调用
import Counter from "./Counter";
function App() {
	return (
		<div className="App">
			<Counter></Counter>
		</div>
	);
}
export default App;

import React from "react";
export default class Counter extends React.Component {
	constructor(props) {
		super(props);
		// 定义数据
		this.state = {
			count: 0,
		};
	}
	// 定义修改数据的方法
	addCount = () => {
        // 语法：this.setState({ 要修改的部分数据 })
		this.setState({
			count: this.state.count + 1,
		});
	};
	// 使用数据 并绑定事件
	render() {
		return <button onClick={this.addCount}>{this.state.count}</button>;
	}
}

this.state = {
	count:0,
	person:{
		name:'jack'
	}
}

this.setState({
    count: this.state.count + 1
    person: {
       ...this.state.person,
       // 覆盖原来的属性 就可以达到修改对象中属性的目的
       name: 'rose'
    }
})

import React from "react";
export default class InputComponent extends React.Component {
	constructor(props) {
		super(props);
		// 声明组件状态
		this.state = {
			message: "this is message",
		};
	}
	// 声明事件回调函数
	changeHandler = (e) => {
		this.setState({ message: e.target.value });
	};
	render() {
		return (
			<div>
				{/* 绑定value 绑定事件*/}
				<input
					value={this.state.message}
					onChange={this.changeHandler}
				/>
			</div>
		);
	}
}

// 定义函数组件
function Hello () {
  return <div>这是我的第一个函数组件!</div>
}

// 定义类组件
function App () {
  return (
    <div className="App">
      {/* 渲染函数组件 */}
      <Hello></Hello>
    </div>
  )
}
export default App

import React from "react";
// Outer.js
// ！！！Outer类组件记得添加到App.js中
class Inner extends React.Component {
	render() {
		return <div>{this.props.text}</div>;
	}
}
export default class Outer extends React.Component {
	render() {
		return <Inner text="hello"></Inner>;
	}
}

import PropTypes from "prop-types";
export default function List = (props) {
	const taskList = props.taskList;
	return (
		<ul>
			{taskList.map((item) => (
				<li key={item.id}>{item.name}</li>
			))}
		</ul>
	);
}
// 添加校验规则
List.propTypes = {
	taskList: PropTypes.array,
};

// 举个栗子
MyComponent.propTypes = {
  // 常见类型
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  // 必填项
  requiredFunc: PropTypes.func.isRequired,
  // A React element即React元素类型
  optionalElement: PropTypes.element,
   // 特定形状，特定结构
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
}

function List({pageSize = 10}) {
  return (
    <div>
      此处展示props的默认值：{ pageSize }
    </div>
  )
}
List.propTypes = {
	pageSize: PropTypes.number,
};
// 然后在APP.js中 不传入pageSize属性，试试看
<List />

import PropTypes from "prop-types";
import React from "react";
export default class List extends React.Component {
    // 重要
	static defaultProps = {
		pageSize: 11,
	};
	render() {
		return <div>此处展示props的默认值：{this.props.pageSize}</div>;
	}
}

List.propTypes = {
	pageSize: PropTypes.number,
};

// 还是举个栗子
import React from "react";
class Inner extends React.Component {
	render() {
		return <div>{this.props.children}</div>;
	}
}
export default class Outer extends React.Component {
	render() {
		return (
			<Inner>
				<h2>Hello</h2>
			</Inner>
		);
	}
}
// 记得在App.js中调用Outer组件

// 记得接收props
import React from "react";
function Inner(props) {
	return <div>{props.children}</div>;
}
export default function Outer() {
	return (
		<Inner>
			<h2>Hello</h2>
		</Inner>
	);
}
// 记得在App.js中调用Outer组件

// 直接复制到App.js试试看吧，在前面的章节我想你也掌握了
import React from "react";

// 函数式子组件
function FSon(props) {
	console.log(props);
	return (
		<div>
			子组件1
			{props.msg}
		</div>
	);
}

// 类子组件
class CSon extends React.Component {
	render() {
		return (
			<div>
				子组件2
				{this.props.msg}
			</div>
		);
	}
}
// 父组件
class App extends React.Component {
	state = {
		message: "this is message",
	};
	render() {
		return (
			<div>
				父组件
				<FSon msg={this.state.message} />
				<CSon msg={this.state.message} />
			</div>
		);
	}
}

export default App;

// 举个栗子咯，复制跑跑看吧
import React from "react";

// 子组件
const Son = (props) => {
	const handleClick = () => {
		// 调用父组件传递过来的回调函数 并注入参数
		props.changeMsg("this is newMessage");
	};
	return (
		<div>
			<button onClick={handleClick}>change</button>
		</div>
	);
};

class App extends React.Component {
	state = {
		message: "this is message",
	};
	// 提供回调函数
	changeMessage = (newMsg) => {
		console.log("子组件传过来的数据:", newMsg);
		this.setState({
			message: newMsg,
		});
	};
	render() {
		return (
			<div>
				<div>父组件</div>
				<h3>{this.state.message}</h3>
				<Son
					// 传递给子组件
					changeMsg={this.changeMessage}
				/>
			</div>
		);
	}
}
export default App;

import React, { createContext } from "react";

// 1. 创建Context对象
const { Provider, Consumer } = createContext();

// 2. 提供数据
class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			message: "this is message",
		};
	}
	render() {
		return (
			<Provider value={this.state.message}>
				<div className="app">
					<ComA />
				</div>
			</Provider>
		);
	}
}
// 3. 消费数据
const ComA = () => {
	return <ComB />;
};

const ComB = () => {
	return <Consumer>{(value) => <div>{value}</div>}</Consumer>;
};

export default App;

// 试试看吧~~~
import React from "react";

// 子组件A
const SonA = (props) =>{
	return (
		<div>
			SonA:
			{props.msg}
		</div>
	);
}
// 子组件B
const SonB = (props) => {
	return (
		<div>
			SonB:
			<button onClick={() => props.changeMsg("new message")}>
				changeMsg
			</button>
		</div>
	);
}

// 父组件
class App extends React.Component {
	// 父组件提供状态数据
	state = {
		message: "this is message",
	};
	// 父组件提供修改数据的方法
	changeMsg = (newMsg) => {
		this.setState({
			message: newMsg,
		});
	};
	render() {
		return (
			<div>
				{/* 接收数据的组件 */}
				<SonA msg={this.state.message} />
				{/* 修改数据的组件 */}
				<SonB changeMsg={this.changeMsg} />
			</div>
		);
	}
}

export default App;

import { useState } from "react";

export default function App() {
    // 使用useState
	const [count, setCount] = useState(0);
	const add = () => {
		setCount(count + 1);
	};
    // 假如是要携带参数需要写成：onClick={()=>add(参数)}形式
	return <button onClick={add}>{count}</button>;
}

// 将count初始值设置为1
const [count, setCount] = useState(() => {
	return 1;
});

// 每次在原来的状态上加2
setCount((preState) => preState + 2);

// 试试看吧~~~
import { useEffect, useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)
 
  useEffect(()=>{
    // dom操作
    document.title = `当前已点击了${count}次`
  })
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}

// 例如这样，仅在组件初始渲染的时候和count更新的时候才会执行
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

// 不可以直接在useEffect的回调函数外层直接包裹 await ，因为异步会导致清理函数无法立即返回
useEffect(() => {
	// 自执行函数
    (async function(){
      const res = await axios.get(url,params)
    }());
}, []);

import { useEffect, useState } from "react";

export default function App() {
	const [count, setCount] = useState(0);
	useEffect(() => {
		console.log("我会在初次组件挂载完成后以及重新渲染时执行");
	});
	return (
		<div>
			<p>You clicked {count} times</p>
			<button onClick={() => setCount(count + 1)}>Click me</button>
		</div>
	);
}

// 跑起来看看吧
// 跑起来看看吧
import { useEffect, useState } from "react";
function Foo() {
	useEffect(() => {
		const timerId = setInterval(() => {
			console.log("副作用函数执行了");
		}, 1000);
		// 添加清理副作用函数
		return () => {
			clearInterval(timerId);
		};
	});
	return <div>this is Foo</div>;
}

function App() {
	const [flag, setFlag] = useState(true);
	return (
		<>
			<button onClick={() => setFlag(false)}>click</button>
			{flag ? <Foo /> : null}
		</>
	);
}

export default App;

// 跑起来看看吧
import React, { useRef, useEffect } from "react";
class Foo extends React.Component {
	render() {
		return <div>this is Foo</div>;
	}
}

function App() {
	const FooRef = useRef(null);
	const h2Ref = useRef(null);
	useEffect(() => {
        // 在控制台中打印
		console.log(FooRef.current);
		console.log(h2Ref.current);
	}, []);
	return (
		<>
			<h2 ref={h2Ref}>this is h2</h2>
			<Foo ref={FooRef}></Foo>
		</>
	);
}

export default App;

// 跑起来看看吧
import { useRef, forwardRef, useEffect } from "react";
const Foo = forwardRef((props, ref) => {
	return <div ref={ref}>{props.children}</div>;
});

function App() {
	const ref = useRef(null);
	useEffect(() => {
		console.log(ref.current);
	}, []);
	return (
		<>
			<Foo ref={ref}>hello</Foo>
		</>
	);
}

export default App;

// 使用useRef()
const boxRef = useRef(/*value*/);
// 储存
boxRef.current = newValue

// 直接上代码吧
import { createContext, useContext } from "react";
// 创建Context对象
const Context = createContext();

const Foo = () => {
	return (
		<div>
			Foo: <Bar />
		</div>
	);
};
// 最底层
const Bar = () => {
	// 底层组件通过useContext函数获取数据
	const message = useContext(Context);
	return <div>Bar:{message}</div>;
};

export default function App() {
	return (
		// 顶层组件通过Provider 提供数据
		<Context.Provider value={"this is message"}>
			<div>
				<Foo />
			</div>
		</Context.Provider>
	);
}

import { useEffect, useState } from 'react'

export function useLocalStorage (key, initialValue) {
  const [message, setMessage] = useState(initialValue)
  // 每次只要message变化 就会自动同步到本地一份
  useEffect(() => {
    window.localStorage.setItem(key, message)
  }, [key,message])
  return [message, setMessage]
} 

// 定义arr
const arr = [1, 2, 3, 4];
// 定义一个reducer 函数
/*
一个 “reducer” 函数，包含四个参数：
1.previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]
2.currentValue：数组中正在处理的元素
3.currentIndex：数组中正在处理的元素的索引
4.array：用于遍历的数组
*/
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 5 + 1 + 2 + 3 + 4
// 5为accumulator初始值
console.log(arr.reduce(reducer,5));
// expected output: 15

const [state, dispatch] = useReducer(reducer, initialState);

//复制看看吧
import React, { useReducer } from "react";

const App = () => {
	const initialState = 0;
	const reducer = (state, action) => {
		switch (action) {
			case "increment":
				return state + 1;
			case "decrement":
				return state - 1;
			case "reset":
				return 0;
			default:
				throw new Error("Unexpected action");
		}
	};
	const [count, dispatch] = useReducer(reducer, initialState);
	return (
		<div>
			{count}
			<button onClick={() => dispatch("increment")}>+1</button>
			<button onClick={() => dispatch("decrement")}>-1</button>
			<button onClick={() => dispatch("reset")}>reset</button>
		</div>
	);
};

export default App;

const initialState = {
  count1: 0,
  count2: 0,
};
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment1':
      return { ...state, count1: state.count1 + 1 };
    case 'decrement1':
      return { ...state, count1: state.count1 - 1 };
    case 'set1':
      return { ...state, count1: action.count };
    case 'increment2':
      return { ...state, count2: state.count2 + 1 };
    case 'decrement2':
      return { ...state, count2: state.count2 - 1 };
    case 'set2':
      return { ...state, count2: action.count };
    default:
      throw new Error('Unexpected action');
  }
};

import React, { useReducer } from "react";

const App = () => {
    // 初始值
	const initialState = {
		count1: 0,
		count2: 0,
	};
    // reducer函数
	const reducer = (state, action) => {
        //action.type为动作类型，这是作者本人约定好的，你也可以用别的
		switch (action.type) {
			case "increment1":
				return { ...state, count1: state.count1 + 1 };
			case "decrement1":
				return { ...state, count1: state.count1 - 1 };
			case "set1":
				return { ...state, count1: action.count };
			case "increment2":
				return { ...state, count2: state.count2 + 1 };
			case "decrement2":
				return { ...state, count2: state.count2 - 1 };
			case "set2":
				return { ...state, count2: action.count };
			default:
				throw new Error("Unexpected action");
		}
	};

	const [state, dispatch] = useReducer(reducer, initialState);
	return (
		<>
			<div>
				{state.count1}
				<button onClick={() => dispatch({ type: "increment1" })}>
					+1
				</button>
				<button onClick={() => dispatch({ type: "decrement1" })}>
					-1
				</button>
				<button onClick={() => dispatch({ type: "set1", count: 0 })}>
					reset
				</button>
			</div>
			<div>
				{state.count2}
				<button onClick={() => dispatch({ type: "increment2" })}>
					+1
				</button>
				<button onClick={() => dispatch({ type: "decrement2" })}>
					-1
				</button>
				<button onClick={() => dispatch({ type: "set2", count: 0 })}>
					reset
				</button>
			</div>
		</>
	);
};

export default App;

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
// useCallback返回 该回调函数的 memoized 版本

const add = () => setCount((count) => count + 1);

import React, { useState, useCallback } from "react";
// 子组件
// 使用React.memo包裹一下吧~~~
const AotherComponent = React.memo(function AotherComponent({ onClick }) {
	console.log("AotherComponent 组件渲染");
	return <button onClick={onClick}>AotherComponent - add Count</button>;
});

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

	const add = () => setCount((count) => count + 1);
	return (
		<div>
			<div>Count is {count}</div>
			<br />
			<div>
				<button onClick={add}>APP - add Count</button>
			</div>
			<AotherComponent onClick={add} />
		</div>
	);
}
export default App;

// 修改一下吧
const add = useCallback(() => setCount((count) => count + 1), []);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

import React, { useMemo, useState } from "react";

function App() {
	const [count, setCount] = useState(0);
	const [bool, setBool] = useState(true);
	useMemo(() => {
		new Array(count).fill("");
		console.log("count变化了,创建了新的数组");
	}, [count]);

	return (
		<div>
			<div>{count}</div>
			<div>Bool is {bool ? "true" : "false"}</div>
			<button onClick={() => setCount(count + 1)}>+1</button>
			<button onClick={() => setBool(!bool)}>取反</button>
		</div>
	);
}

export default App;

import { useId } from "react";
export default function App() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>你喜不喜欢吃肉肉?</label>
      <input id={id} type="checkbox" name="likeMeat"/>
    </>
  );
};

import { useId } from "react";
export default function App() {
	const id = useId();
	return (
		<div>
			<label htmlFor={id + "-firstName"}>First Name</label>
			<div>
				<input id={id + "-firstName"} type="text" />
			</div>
			<label htmlFor={id + "-lastName"}>Last Name</label>
			<div>
				<input id={id + "-lastName"} type="text" />
			</div>
		</div>
	);
}