React极简教程

4. 组件 & Props

函数组件

函数组件是一种纯函数，只接受输入的 props，并返回需要渲染的元素。函数组件通常比类组件更简单、更易于理解、更容易测试和维护。因为函数组件没有 state 和生命周期方法，因此通常适用于以下场景：

当只需要基于传递给组件的 props 来渲染 UI 时
当只需要编写一个简单的组件来执行某些特定的功能，例如渲染列表或图表

类组件

类组件是一种继承 React.Component 类的 JavaScript 类，具有 state 和生命周期方法。类组件适用于以下场景

当需要在组件中使用 state 和生命周期方法时，例如有状态的表单组件和有复杂交互的 UI 组件
当需要使用 Refs 访问 DOM 元素时，例如处理焦点、动画和媒体播放器等

5. State & 生命周期

state是可变的，props是不可变的

6. 事件处理

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. bind()函数创建一个新的函数，将this关键字指向绑定的值。另外，还可以在 bind() 方法的第二个参数之后传递一些参数。这些参数将被预先传递给绑定的函数，在调用绑定的函数时这些参数会在提供的参数之前传递

class TextEditor extends React.Component {
	constructor(props){
		this.onTextChange = this.onTextChange.bind(this)
	}

	function onTextChange(e){
		// do sth
	}
}

9. 表单

受控组件受控组件是指由 React 控制表单数据的组件。在受控组件中，表单数据通过 props 传递给组件，并且由组件自身来处理表单数据的变化。当表单数据发生变化时，组件会通过回调函数来更新组件的 state，从而重新渲染组件。这样，在受控组件中，表单数据始终由 React 来控制，因此称为“受控”。

非受控组件非受控组件是指由 DOM 控制表单数据的组件。在非受控组件中，表单数据由 DOM 元素本身来管理，而不是通过 React 组件的 state 来管理。因此，在非受控组件中，表单数据的变化不会被 React 直接感知到，需要通过 Refs 来获取表单数据

10. 状态提升

状态提升其实就是子组件通过回调函数通知父组件，自己的状态改变了。回调函数是放在props对象中的。例如props.onTextChange(e)

11. 继承

在 Facebook，我们在成百上千个组件中使用 React。我们并没有发现需要使用继承来构建组件层次的情况

[高级]Context

// 定义context
const MyContext = React.createContext(defaultValue);
//使用context
<MyContext.Provider value={/* 某个值 */}>

创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。此默认值有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染

注意，当传递对象(非基本数据类型)给 value 时，检测变化的方式会导致一些问题：详见注意事项。

[高级]Refs转发

有时间再看

[高级]高阶组件

有时间再看

HOOK

hook只能在函数组件中使用，不能在class中使用

useState

一个简单的例子：useState()返回当前状态和一个让你更新它的函数

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState原理：React内部使用到了Fiber，会维护这个变量的状态。等到下一次渲染时，会将新的虚拟DOM树与旧的虚拟DOM树进行比较，如果不一样就进行界面更新。

useEffect

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

⭐️有时候，我们需要根据前一个状态值来更新现在的值

setCount(preValue=>preValue+1)

有些时候，需要在useEffect清除的时候解除绑定，避免内存泄漏

 useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

useEffect的第二个参数(依赖列表)

只有 useEffect（以及它所调用的函数）不引用 props、state 以及由它们衍生而来的值时，你才能放心地把它们从依赖列表中省略

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [id,name,age]); // 任意一个更改都会触发更新
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []); // 在组件挂载和卸载时各执行一次

Hook 使用规则

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中，我们稍后会学习到。）

自定义Hook

useState
- 可用来监听变量的变化
- 可用来发送广播，让监听变量的人进行更新
useReducer useState的替代方案，在某些场景下，useReducer 会比 useState 更适用
useEffect 监听DOM的挂载，卸载和更新
useLayoutEffect 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。
useContext context 值变化时重新渲染
useRef