React 知识体系总结

React 中文文档

基础知识点

元素渲染

元素描述了你在屏幕上想看到的内容。

const element <h1>hello, world</h1>
ReactDom.reander(element, document.getElementById('root'));

组件 & Props

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

function Welcome(props) { // 函数组件 props 通过参数直接传递
  	return <h1>Hello, {props.name}</h1>;
}

class App extends React.Component { // class 组件 通过绑定实例化对象进行读取
    render() {
		return (
            <div>
            	{this.props.boolean}
                <Welcome name="Sara" />
                <Welcome name="Cahal" />
                <Welcome name="Edite" />
            </div>
        );
    }
}
ReactDOM.render(
	<App />,
	document.getElementById('root')
);

State & 生命周期

class Comp extends React.Component {
	constructor(props) {
    	super(this);
    	this.state={
        	isSHow:false,
        }
    }
    
    render() {
    	return (<div onClick={() => this.setState({ isSHow: !this.state.isShow })}>变化状态</div>)
    }
}

事件处理

function Add() {
	return (
    	<div onClick={() => {this.setState({ // 修改状态展示 })}}>
        	点击事件进行修改
        </div>
    )
}

条件渲染

//   if / else 使用
const fun = () => {
	if(true) return <div>条件函数中使用</div>
}
// 组件三元表达
render () {
	return (
    	<>
        	{
            	this.state.isShow?
            	<div>展示if</div>: 
                <div>展示else</div>
             }
        </>
    )
}

列表 & key

const arrList = [1,2,3]
const list = arrList.map(k => (<div key={k}>{k}</div>))

组合 Vs 继承

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}

高级 API

代码分割

Content

错误边界

Refs 转发

Fragments

高阶组件

与第三方库协同

深入 JSX

性能优化

Portals

Profiler

不使用 ES6

不使用 JSX

协调

Refs & DOM

Render Props

静态类型检查

严格模式

使用 PropTypes 类型检查

非受控组件

Web Components

Hook

Hook React 新增特性：

import React, { useState } from 'react'
const Example = () => {
	 const [count, setCount] = useState(0);
   return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>点击按钮</button>
        </div>    
   )
}

// 组件中数据增加 +1  更改数据操作通过 setCount hook属性进行更改，替代原来的setState()

使用 State Hook

// 声明数据中变量

使用 Effect Hook

Hook 规则

自定义 Hook

Hook API 索引

Hooks FAQ

总结

React 平时使用总计，总计平时Api 使用总结。