React - 高级概念 - 《技术沉淀》

Context">Context
Fragments">Fragments
Higher-Order Components">Higher-Order Components
JSX In Depth">JSX In Depth
- Props in JSX
Portals">Portals
Render Props">Render Props
PropTypes
- Requiring Single Child
- Default Prop Values

Context

用于全局配置，避免通过层级tree传递props，例如主题，授权场景等

使用注意：Context is primarily used when some data needs to be accessible by many components at different nesting levels，其会导致组件复用变得更难、
**
可以参考这个例子来复习

Fragments

用于减少层级结构的，Fragments let you group a list of children without adding extra nodes to the DOM
有点像android中的 merge, include 标签

高阶组件(HOC), 用来重用组件逻辑的： a higher-order component is a function that takes a component and returns a new component.
有一个这样的关系
a component transforms props into UI, a higher-order component transforms a component into another component
常以三方库存在 Redux’s connect and Relay’s createFragmentContainer.
可以参考下页面中的例子理解，其实就是组合，抽取公共部分，重新返回一个组件~~

JSX In Depth

React Must Be in Scope react必须在引入在范围内
Using Dot Notation for JSX Type 可以使用DOT符合表达
User-Defined Components Must Be Capitalized 组件名必须大写开头
Choosing the Type at Runtime 动态组件名不支持表达式，需要提取成变量

Props in JSX
JavaScript Expressions as Props 属性可以是js表达式
String Literals
Props Default to “True”

Spread Attributes

function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}

Portals

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. 这句话是关键：A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container

在任意合法的DOM位置render

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

Render Props

有一个核心的概念是
The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function（prop属性是一个function）

It’s important to remember that just because the pattern is called “render props” you don’t have to use a prop named render to use this pattern. In fact, any prop that is a function that a component uses to know what to render is technically a “render prop”.
不一定需要命名为 render , 任何属性值是function的prop都可以， render prop 只是一个技术称谓
看这个例子：

<Mouse children={mouse => (
  <p>The mouse position is {mouse.x}, {mouse.y}</p>
)}/>

// children 在此就是一名字而已，等同于如下更为直接的形式
<Mouse>
  {mouse => (
    <p>The mouse position is {mouse.x}, {mouse.y}</p>
  )}
</Mouse>

PropTypes

类型定义，具体可以查看这里完整的配置说明

Requiring Single Child

指定只有唯一的child

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

Default Prop Values

默认属性值，

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

高级概念