React fiber(React 16) 学习笔录_fiber null false-CSDN博客

本文链接：https://blog.csdn.net/litter_lj/article/details/100513091

1.脚手架安装

npx create-react-app 项目名

2.JSX语法

//如果需要使用JSx的语法糖，则必须引用React

import React, { Component } from 'react';

// Component只是es6的解构赋值语法

3.class语法的本质

//Test.js

import React, { Component } from 'react'
import TestInner from './TestInner'
console.log(typeof TestInner)   //类型是function

export default class Test extends Component {
    render() {
        return (
            <div>
                测试
                <TestInner/>
            </div>
        )
    }
}

//Test.js(函数模式)  跟上面是等价的

function TestInner(props) {
    console.log(props);
    return (
        <div>
            里面的组件
        </div>
    )
}

export default TestInner
  

//TestInner.js

import React, { Component } from 'react'

export default class TestInner extends Component {
    render() {
        return (
            <div>
                里面的组件
            </div>
        )
    }
}

4.setState 异步

不可直接修改this.state，可以用...延展符号或者Object.assign进行浅复制，或者可以用不可变数据的库，如 immer

import React, { Component } from 'react'

export class TestInner extends Component {
    constructor(props){
        super(props);  //此类事父类，TestInner是没有state属性的，如果要使用this，就要继承父类

        this.state={
            count: 1
        }
        this.changeCount=this.changeCount.bind(this); //需要绑定this
    }
     
    //setState是异步的，当你调用后会放到队列里面，同一个key会进行覆盖
    //所以通过this.state.count获取的话，一直都是之前最老的那个
    //如果你要更新的值，依赖老的值，可以用函数的方式进行更新
    //函数的第一个参数可以获取到最新的state，页面虽然没有渲染
    changeCount(){
        const count=this.state.count;
        console.log(this);
        this.setState({
            count:count+1
        })
        this.setState({
            count:count+1
        })
        this.setState({
            count:count+1
        })

        //前面三个都是覆盖的，相当于执行了一次

        this.setState((prev)=>{
            console.log(prev); //所以这边是2
            return {
                count: prev.count+1
            }
        }) //结果是3
    }


    render() {
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={this.changeCount}>增加数值</button>
            </div>
        )
    }
}

export default TestInner

5.事件this的绑定

函数的this指向函数调用时候的作用域，详细可以看这里为什么要绑定this

import React, { Component } from 'react'
import TestInner from './TestInner'

export default class Test extends Component {
    constructor(props) {
        super(props);
        this.alertMsg = this.alertMsg.bind(this); //第一种，在constructor里面绑定this
    }

    alertMsg() {
        console.log('click');
    }
    //第二种
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    // 注意: 这是 *实验性*  public class fields  语法。
    handleClick = () => {
        console.log('this is:', this);
    }

    handleBind(name){
        name && alert(name);
    }
    render() {
        return (
            <div>
                <button onClick={this.alertMsg}>构造函数绑定</button>
                <button onClick={this.handleClick}>箭头函数</button>
                {/*第三种  此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。
                在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，
                这些组件可能会进行额外的重新渲染。
                我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题 */}
                <button onClick={()=>this.alertMsg()}>回调中箭头函数</button>

                {/*如果要传参，一种是回调中箭头函数，一种是bind(this)，推荐后面这种*/}
                <button onClick={()=>this.handleBind("这是参数")}>回调中箭头函数传递参数</button>
                <button onClick={this.handleBind.bind(this,"这是参数")}>bind传递参数</button>
                <TestInner />
            </div>
        )
    }
}

6.代码分割和懒加载可以使用第三方库 Loadable Components

//import的方式,进行后续操作

import("./math").then(math => {
  console.log(math.add(16, 26));
});

//React.lazy 和 Suspense 技术还不支持服务端渲染,版本还要16以上

import React, { Component,Suspense,lazy } from 'react'

const App=lazy(()=>import('./App'))   //必须配合Suspense

export default class Routers extends Component {
    render() {
        return (
            <ConfigProvider locale={zhCN}>
                <Suspense fallback={<div>loading</div>}>
                    <BrowserRouter>
                        <Switch>
                            <Route exact path="/" component={App}></Route>
                            <Route component={NoMatch}></Route>
                        </Switch>
                    </BrowserRouter>
                </Suspense>
            </ConfigProvider>
        )
    }
}

7.条件渲染

render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    //判断语句
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
}

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      // && 之类的操作符
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

//三目运算符

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}


render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

//阻止组件渲染

极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。
若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。

8.错误边界

错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

//使用方式  套在最外层

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

9.Fragment

当有多个元素节点，但是又不想外层套个元素如div

当ul下必须套上多个li这种情形，可以考虑使用Fragment

就是一种外层的空型嵌套，当然也可以用空标签(短语法)代替<></>

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}


class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

10.布尔类型、Null 以及 Undefined 将会忽略

false, null, undefined, and true 是合法的子元素。但它们并不会被渲染

<div>
  {showHeader && <Header />}
  <Content />
</div>

//false布尔值的时候不会渲染<Header />

// 值得注意的是有一些 “false” 值，如数字 0，仍然会被 React 渲染。
// 例如，以下代码并不会像你预期那样工作，因为当 props.messages 是空数组时，0 仍然会被渲染：

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

// 要解决这个问题，确保 && 之前的表达式总是布尔值：

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

// 反之，如果你想渲染 false、true、null、undefined 等值，你需要先将它们转换为字符串：

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

11.Portals

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案

render() {
  // React 并*没有*创建一个新的 div。它只是把子元素渲染到 `domNode` 中。
  // `domNode` 是一个可以在任何位置的有效 DOM 节点。
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

12.ref的使用(回调Refs)

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;

    this.focusTextInput = () => {
      // 使用原生 DOM API 使 text 输入框获得焦点
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    // 组件挂载后，让文本框自动获得焦点
    this.focusTextInput();
  }

  render() {
    // 使用 `ref` 的回调函数将 text 输入框 DOM 节点的引用存储到 React
    // 实例上（比如 this.textInput）
    return (
      <div>
        <input
          type="text"
          ref={(element)=>this.textInput = element}
        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

12.PropTypes 进行类型检查

import PropTypes from 'prop-types'; //16之后是单独分离出来的，要引入

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

//propTypes 首字母小写
Greeting.propTypes = {
  name: PropTypes.string //PropTypes定义类型
};

不同类型验证器：

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // 你可以将属性声明为 JS 原生类型，默认情况下
  // 这些属性都是可选的。
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 任何可被渲染的元素（包括数字、字符串、元素或数组）
  // (或 Fragment) 也包含这些类型。
  optionalNode: PropTypes.node,

  // 一个 React 元素。
  optionalElement: PropTypes.element,

  // 一个 React 元素类型（即，MyComponent）。
  optionalElementType: PropTypes.elementType,

  // 你也可以声明 prop 为类的实例，这里使用
  // JS 的 instanceof 操作符。
  optionalMessage: PropTypes.instanceOf(Message),

  // 你可以让你的 prop 只能是特定的值，指定它为
  // 枚举类型。
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 一个对象可以是几种类型中的任意一个类型
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 可以指定一个数组由某一类型的元素组成
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 可以指定一个对象由某一类型的值组成
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 可以指定一个对象由特定的类型值组成
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
  
  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),   

  // 你可以在任何 PropTypes 属性后面加上 `isRequired` ，确保
  // 这个 prop 没有被提供时，会打印警告信息。
  requiredFunc: PropTypes.func.isRequired,

  // 任意类型的数据
  requiredAny: PropTypes.any.isRequired,

  // 你可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。
  // 请不要使用 `console.warn` 或抛出异常，因为这在 `onOfType` 中不会起作用。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // 你也可以提供一个自定义的 `arrayOf` 或 `objectOf` 验证器。
  // 它应该在验证失败时返回一个 Error 对象。
  // 验证器将验证数组或对象中的每个值。验证器的前两个参数
  // 第一个是数组或对象本身
  // 第二个是他们当前的键。
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

13.默认 Prop 值

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// 指定 props 的默认值(defaultProps)：

Greeting.defaultProps = {
  name: 'Stranger'
};

如果你正在使用像 transform-class-properties 的 Babel 转换工具，你也可以在 React 组件类中声明 defaultProps 作为静态属性

配合webpack

class Greeting extends React.Component {

  static defaultProps = {
    name: 'stranger'
  }

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

14.PureComponent

React.PureComponent 与 React.Component 很相似。
两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，
而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。

如果赋予 React 组件相同的 props 和 state，render() 函数会渲染相同的内容，
那么在某些情况下使用 React.PureComponent 可提高性能

React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层比较。
如果对象中包含复杂的数据结构，则有可能因为无法检查深层的差别，产生错误的比对结果。
仅在你的 props 和 state 较为简单时，才使用 React.PureComponent

//使用方式

class ListOfWords extends React.PureComponent {
  render() {
    return <div>{this.props.words.join(',')}</div>;
  }
}

15.组件的生命周期

挂载
------------------------------------------

// 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

constructor()

//getDerivedStateFromProps 会在调用 render 方法之前调用，
//并且在初始挂载及后续更新时都会被调用。
//它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
//很少使用，尽量不使用

static getDerivedStateFromProps()

render()

componentDidMount()

------------------------------------------

下述生命周期方法即将过时，在新代码中应该避免使用它们：

UNSAFE_componentWillMount()

更新
------------------------------------------

// 当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

--static getDerivedStateFromProps()

--shouldComponentUpdate()

--render()


// getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。
// 它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。
// 此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
// 此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等

--getSnapshotBeforeUpdate()

使用方式：

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 我们是否在 list 中添加新的 items ？
    // 捕获滚动位置以便我们稍后调整滚动位置。
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 如果我们 snapshot 有值，说明我们刚刚添加了新的 items，
    // 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
    //（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

--componentDidUpdate()

------------------------------------------

下述生命周期方法即将过时，在新代码中应该避免使用它们：

UNSAFE_componentWillUpdate()

UNSAFE_componentWillReceiveProps()

卸载
------------------------------------------

// 当组件从 DOM 中移除时会调用如下方法：

componentWillUnmount()

错误处理
------------------------------------------

// 当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：


// 此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state
// getDerivedStateFromError() 会在渲染阶段调用，因此不允许出现副作用。 
// 如遇此类情况，请改用 componentDidCatch()
static getDerivedStateFromError()



// 此生命周期在后代组件抛出错误后被调用。 它接收两个参数：
// error —— 抛出的错误。
// info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。
// componentDidCatch() 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况

componentDidCatch()

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以显示降级 UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // "组件堆栈" 例子:
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级 UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

16.怎样阻止函数被调用太快或者太多次？节流和防抖

如果你有一个 onClick 或者 onScroll 这样的事件处理器，想要阻止回调被触发的太快，那么可以限制执行回调的速度，可以通过以下几种方式做到这点：


----节流：基于时间的频率来进行抽样更改

----防抖：一段时间的不活动之后发布更改


// 节流阻止函数在给定时间窗口内被调不能超过一次

就好比我们用水桶去接水，水龙头保持以不变的流量出水（即事件不断被触发），
只有当水桶里的水满的时候（setTimeout时间到达），我们才将装满水的水桶拿走（执行事件处理函数），
使用完后再拿这个空桶继续接水（重新开始计时）


// 防抖确保函数不会在上一次被调用之后一定量的时间内被执行。
// 当必须进行一些费时的计算来响应快速派发的事件时（比如鼠标滚动或键盘事件时），防抖是非常有用的

就好比比如一根拉直的弹簧，我们拨动一下它就会抖动，过一段时间后弹簧会恢复到平静的状态（从拨动弹簧使其抖动到恢复平静的时长就是这一定量的时间）。

在这个过程中，拨动弹簧的这一行为假设为事件被触发，当弹簧恢复平静时我们再执行事件处理函数。
基于以上假设，当我们在弹簧还没恢复到平静状态时，又不断地拨动它（并重新开始计时），
因为弹簧还没恢复到平静，那么事件处理函数就一直不会被执行。
只有当我们拨动它，并且之后再也不动它（也就是最后一次触发），等它恢复到平静状态时，事件处理函数才会被执行

// 节流 “click” 事件处理器，使其每秒钟的只能调用一次

import throttle from 'lodash.throttle';

class LoadMoreButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.handleClickThrottled = throttle(this.handleClick, 1000);
  }

  componentWillUnmount() {
    this.handleClickThrottled.cancel();
  }

  render() {
    return <button onClick={this.handleClickThrottled}>Load More</button>;
  }

  handleClick() {
    this.props.loadMore();
  }
}

//防抖 250ms 的延迟来改变文本输入

import debounce from 'lodash.debounce';

class Searchbox extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.emitChangeDebounced = debounce(this.emitChange, 250);
  }

  componentWillUnmount() {
    this.emitChangeDebounced.cancel();
  }

  render() {
    return (
      <input
        type="text"
        onChange={this.handleChange}
        placeholder="Search..."
        defaultValue={this.props.value}
      />
    );
  }

  handleChange(e) {
    // React pools events, so we read the value before debounce.
    // Alternately we could call `event.persist()` and pass the entire event.
    // For more info see reactjs.org/docs/events.html#event-pooling
    this.emitChangeDebounced(e.target.value);
  }

  emitChange(value) {
    this.props.onChange(value);
  }
}