react常用知识点

react文档

中文文档 英文文档

react创建组件的方式

1. 函数式创建，直接返回dom

import React from 'react';

function Welcom(props){
	return <div>Hello world</div>
}

函数式创建

2. class创建组件

import React,{Component} from 'react';

class Welcome extends Component{
  constructor(props){
    super(props);
  }

  render(){
    return <div>Hello World</div>
  }
}

react创建dom的方式

React.createElement(
  type,
  [props],
  [...children]
)

type：可以是标签名也可以是组件名，
props：要传的参数
children：组件内容或子组件

import React from 'react';
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

React.createElement(Hello, {toWhat: 'World'}, null);
 

react生命周期

react生命周期函数就是在组件渲染成真实DOM或者从真实DOM卸载过程中到达某一阶段就会自行执行的函数

getDerivedStateFromProps：主要用在父组件通过props更新子组件状态，代替了被废弃的componentWillReceiveProps()
componentDidMount：在组件已经渲染成真实dom后执行
shouldComponentUpdate：在组件已经渲染到真实dom后，再次更新时执行
getSnapshotBeforeUpdate：在组件已经渲染到真实dom后，再次更新时，即将输出真实dom前执行
componentDidUpdate：在组件已经渲染到真实dom后，再次更新完成时执行
componentWillUnmount：在组件从真实dom卸载后执行

react数据传递

1. 父组件传给子组件：
   在子组件上添加一个标明这个数据的属性
2. 子组件传给父组件：
   在子组件上标明一个属性，赋予这个属性一个函数，在子组件中调用这个函数，将数据传入函数
3. context跨组件传递
   实例化一个React.createContext();
   将父组件用实例化后的对象的Provider属性组件包裹，将要传递的数据作为属性传给组件
   子组件的 指定一个静态变量contextType接收这个实例
   使用this.context便可以获取传递的数据
4. redux全局传递

Hook

作用：代替class组件，让函数组件有自己的状态，同时便于组件逻辑提取和复用

api

useState：设置状态和更新状态

import React, {useState} from 'react';

function Welcome(){
	const [state,setState]=useState(initialState);
}

useEffect:相当于class组件中的componentDidMount,componentDidUpdate,componentWillUnmount生命周期

import React, {useEffect} from 'react';
function Welcome(props){
useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 清除订阅
    subscription.unsubscribe();
  };
});
}

useContext:获取context值

import React, {useEffect} from 'react';

const MyContext=React.createContext();

function Welcome(){
const value = useContext(MyContext);
}

useReducer:useState的替代方案，子组件传递数据给父组件不需要使用回调函数，直接使用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 (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

useCallback和useMemo:在组件渲染之前判断根据传入的值判断是否需要重新渲染

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

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

useCallback和useMemo最大的不同就是useCallback返回的是一个执行完的函数，而useMemo返回的是一个函数，需要你自己执行
useCallback、useMemo和useEffect最大的不同是useEffect是在组件渲染完成后执行，而useCallback、useMemo在组件渲染之前执行，而前两个在渲染之前执行，所以可以用来优化组件是否渲染
useRef:返回ref对象

import React, {useRef} from 'react';

function Welcome(){
const divEl=useRef(null);

return(
	<>
		<div ref={divEl}></div>
	</>
)
}

自定义Hook：方法名开头用use

react性能优化

1. 减少组件更新层级
2. 使用虚拟列表

与第三方库集成

需要操作dom的在组件渲染完成后的生命周期中操作