淘宝双十一超级红包 》
React 参考手册
React 手册包含了各种核心 API、Hooks、组件生命周期方法等。
以下是一些常见的函数和方法，以及它们的简要说明：
React 核心 API
createElement(type, [props], [...children]) - 创建一个 React 元素或组件。
实例
const element = React.createElement('div', { className: 'container' }, 'Hello, World!');
// React.createElement 返回一个 React 元素
cloneElement(element, [props], [...children]) - 克隆并返回一个 React 元素，可以传递新的 props 和子元素。
实例
const parentElement = <div>Hello</div>;
const clonedElement = cloneElement(parentElement, { className: 'child' });
// clonedElement 是一个克隆的 React 元素，带有新的 className
createFactory(type) - 创建一个工厂函数，用于创建指定类型的 React 元素。
实例
const factory = React.createFactory('button');
const buttonElement = factory({ onClick: () => console.log('Button clicked') }, 'Click me');
// buttonElement 是一个工厂创建的 React 元素，一个可点击的按钮
isValidElement(element) - 判断一个对象是否是有效的 React 元素。
实例
const element = <div>Hello</div>;
console.log(isValidElement(element)); // true
Children.map(children, function[(thisArg)]) - 遍历和映射 React 子元素。
实例
const parentElement = (
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
);
const mappedChildren = Children.map(parentElement.props.children, child => (
<li>{child}</li>
));
// mappedChildren 是映射后的子元素列表
React 组件生命周期方法
constructor(props) - 构造函数，在组件创建时调用，用于初始化 state 和绑定方法。
实例
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return <div>{this.state.count}</div>;
}
}
componentDidMount() - 组件挂载后调用，通常用于数据获取、订阅等副作用操作。
实例
class MyComponent extends Component {
componentDidMount() {
// 在组件挂载后订阅数据
this.subscription = subscribeToData(data => {
this.setState({ data });
});
}
componentWillUnmount() {
// 在组件卸载前取消订阅
this.subscription.unsubscribe();
}
render() {
return <div>{this.state.data}</div>;
}
}
componentDidUpdate(prevProps, prevState) - 组件更新后调用，通常用于响应 props 或 state 的变化。
实例
class MyComponent extends Component {
componentDidUpdate(prevProps, prevState) {
// 当 props 或 state 变化时更新数据
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
render() {
return <div>{this.props.userID}</div>;
}
}
componentWillUnmount() - 组件将被卸载前调用，用于清理定时器、取消订阅等资源释放。
实例
class MyComponent extends Component {
componentWillUnmount() {
// 在组件卸载前清理资源
clearInterval(this.timerID);
}
render() {
return <div>{this.state.time}</div>;
}
}
static getDerivedStateFromProps(props, state) - 用于替代 componentWillReceiveProps，在 props 变化时更新 state。
实例
class MyComponent extends Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.userID !== prevState.userID) {
return { userID: nextProps.userID };
}
return null;
}
render() {
return <div>{this.state.userID}</div>;
}
}
React Hooks
useState(initialState) - 声明一个状态变量及其更新函数。
实例
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
useEffect(callback, [dependencies]) - 声明一个副作用操作，类似于 componentDidMount 和 componentDidUpdate 的组合。
实例
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
}, 1000);
return () => clearInterval(interval);
}, []); // 空数组作为第二个参数表示仅在组件挂载和卸载时执行
return <p>Timer: {seconds} seconds</p>;
}
useContext(context) - 获取并订阅一个 React context。
实例
const MyContext = React.createContext('default');
function MyComponent() {
const contextValue = useContext(MyContext);
return <p>Context value: {contextValue}</p>;
}
useReducer(reducer, initialState) - 声明一个复杂状态逻辑的 reducer 和 dispatch 函数。
实例
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
useCallback(callback, [dependencies]) - 缓存一个回调函数，以便在依赖项变化时避免重复创建。
实例
function ParentComponent() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<ChildComponent onClick={increment} />
</div>
);
}
function ChildComponent({ onClick }) {
return <button onClick={onClick}>Increment Count</button>;
}
useMemo(factory, [dependencies]) - 缓存计算值，以便在依赖项变化时避免重复计算。
实例
function ExpensiveComponent({ data }) {
const expensiveValue = useMemo(() => {
return computeExpensiveValue(data);
}, [data]);
return <div>Expensive value: {expensiveValue}</div>;
}
useRef(initialValue) - 创建一个持久化的引用，可用于访问 DOM 元素或缓存任何可变值。
实例
function TextInputWithFocusButton() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return (
<>
<input ref={inputRef} type="text" />
<button onClick={() => inputRef.current.focus()}>Focus Input</button>
</>
);
}
其他常见函数
ReactDOM.render(element, container[, callback]) - 将 React 元素渲染到指定的 DOM 节点。
实例
import ReactDOM from 'react-dom';
const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, document.getElementById('root'));
ReactDOM.createRoot(container[, options]) - 创建一个 React 根实例，支持并发渲染特性。
实例
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
ReactDOM.unmountComponentAtNode(container) - 卸载指定 DOM 节点上的 React 组件。
实例
import ReactDOM from 'react-dom';
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
ReactDOMServer.renderToString(element) - 将 React 元素渲染为静态 HTML 字符串，用于服务器端渲染。
实例
import ReactDOMServer from 'react-dom/server';
const element = <div>Hello, World!</div>;
const htmlString = ReactDOMServer.renderToString(element);