重读react官方文档

[zhangyanan0525]

Tutorial

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.(React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。)

Some concepts：

• element（JavaScript object，store in a variable or pass around in your program）
• components
• function components
• props
• state
• render
• jsx（we keep use jsx instead of React.createElement('div') api)

  Jsx Syntax

  The <div /> syntax is transformed at build time to React.createElement('div').

  Naming Conventions

  

在 React 中，有一个命名规范，通常会将代表事件的监听 prop 命名为 on[Event]，将处理事件的监听方法命名为 handle[Event] 这样的格式。

Modify-Data Conventions (Immutability )

Lifting State Up

当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。

Function Components

[zhangyanan0525]

Docs

MAIN CONCEPTS

1.Hello World

2.Introducing JSX

JSX produces React “elements”. *** Why JSX components contain both markup and logic

3.Rendering Elements

React elements are immutable.the only way to update the UI is to create a new element. React Only Updates What’s Necessary(Even though we create an element describing the whole UI tree, only the node whose contents has changed gets updated by React DOM.)

4.Components and Props

Conceptually, components are like JavaScript functions.They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.(组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。) we can use Function Components or Class Components Always start component names with a capital letter.(组件名字大写，小写会被认为是原生的） Props are Read-Only

5.State and Lifecycle

free up resources taken by the components when they are destroyed.（当组件被销毁时释放所占用的资源是非常重要的。） 比如：

  componentDidMount() {
    this.timerID = setInterval(***,1000);
  }
卸载时销毁
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

关于state三件重要的事 1.Do Not Modify State Directly .Use setState(). 2.State Updates May Be Asynchronous 3.State Updates are Merged The Data Flows Down“top-down” or “unidirectional” data flow 数据是向下的。被称作，“自上而下”或者“单向的”数据流

6.Handling Events

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:

• React events are named using camelCase, rather than lowercase.
• With JSX you pass a function as the event handler, rather than a string.
• you cannot return false to prevent default behavior in React. You must call preventDefault explicitly.

class里的方法并不会默认绑定this。使用时注意绑定。 3种方式： 1.public class fields syntax 2.arrow function in the callback 3.binding in the constructor

Passing Arguments to Event Handlers(向事件处理程序传递参数): 1.显式传递 2.bind隐式传递

7.Conditional Rendering

1.if 2.&& operator， 3.JavaScript conditional operator condition ? true : false

8.Lists and Keys

• A good rule of thumb is that elements inside the map() call need keys.(在 map() 方法中的元素需要设置 key 属性。)
• Keys Must Only Be Unique Among Siblings (key 只是在兄弟节点之间必须唯一())
• Keys serve as a hint to React but they don’t get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name(key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，请用其他属性名显式传递这个值)

  9.Forms

  受控组件：受控组件：<input/>, <textarea/>, <select/>等 不受控组件： file input等

  10.Lifting State Up

  react开发者工具检查状态提升的bug很不错

  11.Composition vs Inheritance

  官方推荐用组合而不是继承。 在“Containment”关系的组建中，有些组建并不知道它的children是什么，比如dialog，siderbar等。可以使用props.children来传递children。有时候不使用props.children，我们也可以使用约定好的prop名字把组建传递进去。This approach may remind you of “slots” in other libraries but there are no limitations on what you can pass as props in React.（这种方法可能使你想起别的库中“槽”（slot）的概念，但在 React 中没有“槽”这一概念的限制，你可以将任何东西作为 props 进行传递。）

[zhangyanan0525]

Docs

ADVANCED GUIDES

Accessibility(无障碍）

Code-Splitting（代码分割）

1.import（） The best way to introduce code-splitting into your app is through the dynamic import() syntax.（在你的应用中引入代码分割的最佳方式是通过动态 import() 语法。）When Webpack comes across this syntax, it automatically starts code-splitting your app. （当 Webpack 解析到该语法时，它会自动地开始进行代码分割） 2.React.lazy The React.lazy function lets you render a dynamic import as a regular component.React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.（React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。 ）（这句是从别的文档上看来的：可以让我们在不依赖第三方库的情况下简化对延迟加载（lazy loading）的处理。） 3.Suspense 4.Error boundaries 5.Route-based code splitting 关于code-splitting 插播一点vue的知识 react和vue都实现的差不多啊哈哈哈哈哈哈

Context

• Before You Use Context：Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.（ Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。如果你只是想避免层层传递一些属性，组件组合（component composition）有时候是一个比 context 更好的解决方案。 ）
• 自己写了一个使用Context的小例子 github code codePen

  Error Boundaries

  Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.（错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。） API：

• static getDerivedStateFromError()
• componentDidCatch() Error boundaries work like a JavaScript catch {} block, but for components.

  Forwarding Refs

  Ref forwarding is a technique for automatically passing a ref through a component to one of its children. 一般我们用不着这个Ref forwarding。官方文档举了HOC使用Ref forwarding的例子。这里再附一篇文章

  Fragments

  A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. 有些情况确实不能拿个div包着一系列的元素。比如父组件是。子组件就不能拿

  包 自己拿codePen试了一下 这里还是截个图比较直观

  Integrating with Other Libraries

  跟第三库协同 1.Integrating with DOM Manipulation Plugins 集成带有 DOM 操作的插件 React is unaware of changes made to the DOM outside of React. if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty <div />. 如果节点被react之外的其他的库改变了，react根本无感知。避免这种冲突最容易的方式就是阻止react 组件更新。比如我写一个空的<div/>标签就可以不更新。 We will attach a ref to the root DOM element. Inside componentDidMount, we will get a reference to it so we can pass it to the jQuery plugin. To prevent React from touching the DOM after mounting, we will return an empty <div /> from the render() method. The<div /> element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM: 我们在componentDidMount使用ref获取到这个element然后我们把我们的jquery插件放进去。为了阻止react还在操作这个dom我们就只写个空的div。这个div又没有children有没有属性，react当然不会更新它了。我们的jquery就控制这个dom。 detach event listeners in componentWillUnmount 别忘了在componentWillUnmount移除那些事件监听 we will also add a componentDidUpdate() lifecycle method that notifies if parent component’s state changes. we can use jQuery trigger() API to notify it about changes to the original DOM element. 我们在componentDidUpdate生命周期里使用jquery的api：trigger() 控制组件的更新。 2.Integrating with Other View Libraries reactDOM.render()可以灵活处理

  JSX In Depth

  讲了jsx的多种用法。

  Optimizing Performance

  性能优化

  Portals

  ReactDOM.createPortal(child, container) createPortal提供一种，可以把children render到父组件之外的其他DOM里的方法。 Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the React tree regardless of position in the DOM tree. 尽管 portal 可以被放置在 DOM 树中的任何地方，但在任何其他方面，其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 React 树， 且与 DOM 树 中的位置无关，那么无论其子节点是否是 portal，像 context 这样的功能特性都是不变的。 This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree. 这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 React 树的祖先，即便这些元素并不是 DOM 树 中的祖先。 我自己写了半拉Model。哈哈。样式很丑，但是能体现出potal的作用。1.Model组件能渲染在父组件之外的其他节点上2.Model里的按钮，点击冒泡依然能被最外层捕获。 codePen链接在这里

  React Without ES6

  React Without JSX

  Reconciliation

  React算法基于以下两条假设： 1.Two elements of different types will produce different trees. 2.The developer can hint at which child elements may be stable across different renders with a key prop. （1.两个不同类型的元素会产生出不同的树；2.开发者可以通过 key prop 来暗示哪些子元素在不同的渲染下能保持稳定；） The Diffing Algorithm

1. Elements Of Different Types
   • tear down the old tree and build the new tree
   • componentWillUnmount() componentWillMount() componentDidMount()
2. DOM Elements Of The Same Type only updates the changed attributes
3. Component Elements Of The Same Type
   • state is maintained across renders. React updates the props。
   • componentWillReceiveProps() componentWillUpdate()
4. Recursing On Children 列表children应该使用key

   Refs and the DOM

   1.When to Use Refs

   • Managing focus, text selection, or media playback.
   • Triggering imperative animations.
   • Integrating with third-party DOM libraries.

     2.Creating Refs

   • React.createRef()

     3.Accessing Refs

   • this.myRef.current

     4.You may not use the ref attribute on function components because they don’t have instances

     5.Exposing DOM Refs to Parent Components

   • ref forwarding

     6.回调函数方式的ref

     7.字符串方式的ref（可能会被废弃）

     Render Props

     Render Props, props.children function, HOC, React’s cloneElement()

     Static Type Checking

     Flow and TypeScript

     Strict Mode

   • 识别不安全的生命周期
   • 关于使用过时字符串 ref API 的警告
   • 关于使用废弃的 findDOMNode 方法的警告
   • 检测意外的副作用
   • 检测过时的 context API

     Typechecking With PropTypes

   • PropTypes
   • Requiring Single Child
   • Default Prop Values

     Uncontrolled Components

     Web Components

[zhangyanan0525]

Api Reference

React

React Top-Level API

Overview

Components

• React.Component
• React.PureComponent -->shallow comparison
• React.memo -->1.for function components2.shallow comparison

  Creating React Elements

• createElement() -->if you are not using JSX
• createFactory()-->废弃

  Transforming Elements

• cloneElement()
• isValidElement()-->判断是不是react element返回true/false
• React.Children
  1. React.Children.map()
  2. React.Children.forEach()
  3. React.Children.count()
  4. React.Children.only()
  5. React.Children.toArray()

Fragments

• React.Fragment

  Refs

• React.createRef
• React.forwardRef

  Suspense

• React.lazy
• React.Suspense