React特性
- 声明式
- 组件化
- 跨平台编写
React哲学 Thinking in React
- 定义：使用JS构建快速响应的大型Web应用的方式
- 以下是响应web性能的两大主要原因：
React.lazy():由于用户看到的内容是有限的，因此在一开始的时候，不用全部加载所需内容，而是选择在使用的时候再按需加载，不然会导致页面反应很慢。
React.suspense:有时候网络比较慢，为了提高体验感，可以设置一个骨架屏等内容
ErrorBoundary:当子孙组件抛出错误的时候（主要是资源加载失败），渲染降级UI，例如“抱歉，出现错误！”。在函数式组件中，也有useErrorBounday了
类组件与函数式组件之间的区别
（各种hooks构成组件）
现在更推荐使用函数式组件+hooks 补充：子组件->父组件通信：useImperativeHandle 父组件可以直接调用子组件的方法 以下为React官网的例子
//父组件
import { useRef } from 'react';
import MyInput from './MyInput.js';
export default function Form() {
const ref = useRef(null);
function handleClick() { ref.current.focus(); //调用子组件方法
// This won't work because the DOM node isn't exposed: // ref.current.style.opacity = 0.5; }
return ( <form> <MyInput label="Enter your name:" ref={ref} />
<button type="button" onClick={handleClick}> Edit </button> </form> ); }
//子组件：进行改造
import { forwardRef, useRef, useImperativeHandle } from 'react';
const MyInput = forwardRef(function MyInput(props, ref) { //对函数进行改造
useImperativeHandle(ref, () => { return
{ focus() { inputRef.current.focus(); },
scrollIntoView() { inputRef.current.scrollIntoView(); },
}; }, []);
return <input {...props} />; });
export default MyInput;
实习的时候，使用过此类通信方式，当时的使用场景是这样的:
使用的契机是希望组件能够调用其兄弟组件的方法，项目中使用了上述方法，使各个兄弟组件的方法都能在父组件中被调用，然后由父组件将各个兄弟组件所需的方法作为参数传入
