尚硅谷_React(4) - 扩展

// 第二种写法
this.setState((state, props)=>{
	return {count: state.count+1}
})

	//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
	const Login = lazy(()=>import('@/pages/Login'))
	
	//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
	<Suspense fallback={<h1>loading.....</h1>}>
        <Switch>
            <Route path="/xxx" component={Xxxx}/>
            <Redirect to="/login"/>
        </Switch>
    </Suspense>

// 16.8以后有了hooks，从此函数式组件崛起了
import React from "react";
export default function Demo() {
  console.log("demo"); // 1+n
  const [count, setCount] = React.useState(0); // react底层做了处理，再次调用不会进行覆盖

  const add = () => {
    // setCount(count + 1);
    setCount((count) => count + 1); // 第二种写法
  };

  return (
    <div>
      <h2>和为：{count}</h2>
      <button onClick={add}>点击</button>
    </div>
  );
}

React.useEffect(() => {
    const timer = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000);
    return () => { // 组件被卸载后调用, 模拟componentWillUnmount
      clearInterval(timer);
    };
  }, []);

const myRef = React.useRef();
<input type="text" ref={myRef} />
console.log(myRef.current.value);

import React, { memo, } from 'react';

const isEqual = (prevProps, nextProps) => {
  if (prevProps.number !== nextProps.number) {
    return false;
  }
  return true;
}

export default memo((props = {}) => {
  console.log(`--- memo re-render ---`);
  return (
    <div>
      {/* <p>step is : {props.step}</p> */}
      {/* <p>count is : {props.count}</p> */}
      <p>number is : {props.number}</p>
    </div>
  );
}, isEqual);

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

import React, { useMemo } from 'react';

export default (props = {}) => {
    console.log(`--- component re-render ---`);
    return useMemo(() => {
        console.log(`--- useMemo re-render ---`);
        return <div>
            {/* <p>step is : {props.step}</p> */}
            {/* <p>count is : {props.count}</p> */}
            <p>number is : {props.number}</p>
        </div>
    }, [props.number]);
}

1) 创建Context容器对象：
	const MyContext = React.createContext()  
	
2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
	<MyContext.Provider value={数据}>
		后代组件（后代类组件和函数式组件接收方式不太一样，见(3)）
  </MyContext.Provider>
    
3) 后代组件读取数据：

	//第一种方式:仅适用于类组件 
		static contextType = xxxContext  // 声明接收context
	  this.context // 读取context中的value数据
	  
	//第二种方式: 函数组件与类组件都可以
	  <xxxContext.Consumer>
	    {
	      value => ( // value就是context中的value数据
	        要显示的内容
	      )
	    }
	  </xxxContext.Consumer>

// 定义一个高阶组件
function withUser(WrappedComponent) {
  return props => {
    return (
      <UserContext.Consumer>
        {
          user => {
            return <WrappedComponent {...props} {...user}/>
          } 
        }
      </UserContext.Consumer>
    )
  }
}

// 创建Context
const UserContext = createContext({
  nickname: "默认",
  level: -1,
  区域: "中国"
});

class Home extends PureComponent {
  render() {
    return <h2>Home: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域: ${this.props.region}`}</h2>
  }
}

const UserHome = withUser(Home);

class App extends PureComponent {
  render() {
    return (
      <div>
        App
        <UserContext.Provider value={{nickname: "why", level: 90, region: "中国"}}>
          <UserHome/>
        </UserContext.Provider>
      </div>
    )
  }
}

export default App;

export default class Parent extends Component {
  render() {
    return (
      <div className="parent">
        <h3>我是Parent组件</h3>
        <A>
          <B/>
        </A>
      </div>
    )
  }
}
class A extends Component {
	render() {
		return (
			<div className="a">
				<h3>我是A组件</h3>
				{this.props.children}
			</div>
		)
	}
}

export default class Parent extends Component {
	render() {
		return (
			<div className="parent">
				<h3>我是Parent组件</h3>
				<A render={(name)=><C name={name}/>}/> // 这里的render是约定俗成的, peiqi也可以
			</div>
		)
	}
}
class A extends Component {
	state = {name:'tom'}
	render() {
		console.log(this.props);
		const {name} = this.state
		return (
			<div className="a">
				<h3>我是A组件</h3>
				{this.props.render(name)}
			</div>
		)
	}
}

// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}

componentDidCatch(error, info) { // 如果渲染组件出错，就会被调用
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info);
}

function enhanceComponent(WrappedComponent) {
  class NewComponent extends PureComponent {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }

  NewComponent.displayName = "Kobe";
  return NewComponent;
}

class Modal extends PureComponent {
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      document.getElementById("modal")
    )
  }
} // 将会被挂载到id位modal的元素上

import React, { PureComponent, StrictMode } from 'react';
export default class App extends PureComponent {
  render() {
    return (
      <div>
        <StrictMode> // 将检查Home及其后代组件，不检查Profile
          <Home/>
        </StrictMode>
        <Profile/>
      </div>
    )
  }
}