JavaScript 和 React，React用了大量语法糖，让JS编写更方便。

---

https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0010

https://reactjs.org/docs/jsx-in-depth.html

JSX in Depth

https://babeljs.io/  JS编译器,学习react和JS直接的转换。

---

JSX仅支持句法糖syntactic sugar:

React.createElement(component, props, ...children)函数,

JSX code:

<MyButton color="blue" shadowSize={2}>
 Click Me
</MyButton> 

编译compiles into:

React.createElement(

  MyButton,

  {color: 'blue', shadowSize: 2},

  'Click Me'

)   

也可以使用self_closing form of the tag if there are no children. So:

<div className="sidebar" />

compiles into:

React.createElement(

  'div',

  {className: 'sidebar'},

  null

)

函数形式的：

function hello() {

return <div>Hello world!</div>;

}

转换为：

function hello() {

  return React.createElement(

    'div',

    null,

    'Hello world!'

  );

}

---

关于React元素的格式：

React 一定在Scope内。

使用. Dot Notaiton ,可以在JSX中使用点符号。如果一个模块要调出一些React组件，这样就方便了。例子：

import React from 'react';

const MyComponents = {

  DatePicker: function DatePicker(props) {

    return <div>Imagine a {props.color} datepicker here.</div>;

  }

}

function BlueDatePicker() {

  return <MyComponents.DatePicker color="blue" />;

}

自定义的组件必须首字母大写(除非分配它一个首字母大写的变量)。function Hello(props){...}

在运行时选择类型Choosing the type at runtime

不能把表达式用做React element type。但是可以把它分配给一个大写字母的变量，然后就可以间接用JSX格式了

import React from 'react';

import { PhotoStory, VideoStory } from './stories';

const components = {

  photo: PhotoStory,

  video: VideoStory

};

function Story(props) {

  // Wrong! JSX type can't be an expression.

  return <components[props.storyType] story={props.story} />;

}

function Story(props) {

  // Correct! JSX type can be a capitalized variable.

  const SpecificStory = components[props.storyType];

  return <SpecificStory story={props.story} />;

}

---

Props in JSX

通过{}, 任何JS expression 都可以作为props. 例如<MyComponent foo={1 + 2 + 3 + 4} />

if statements and for loops 不是JS表达式，不能直接用于JSX。但{}就能用了

function NumberDescriber(props) {

  let description;

  if (props.number % 2 == 0) {

    description = <strong>even</strong>;

      } else {

        description = <i>odd</i>

      }

  return <div>{props.number} is an {description} number</div>;

}

条件判断 Inline的写法：

{true && expression}  //如果是true,则执行表达式。

{condition ? true : false }

防止组件被渲染：

return null; ⚠️，组件的lifecycle 方法钩子方法，仍然生效componentWillUpdate 和 componentDidUpdate。

---

Children in JSX

string Literals

<div>This is valid HTML &amp; JSX at the same time.</div>

&amp; 就是&

编译：

React.createElement(

  "div",

  null,

  "This is valid HTML & JSX at the same time."

);

JSX移除一行开头和结尾的空格

JSX Children

支持内嵌JSX元素作为孩子。在嵌套组件中很有用。

React组件也返回数组元素。return [, ,];

JS expression也可以作为孩子。

function Item(props) {

  return <li>hello, {props.message}</li>;  //props.children

}

function TodoList() {

  const todos = ['finish', 'submit ', 'review'];

  return (

    <ul>

//这个是函数作为props.children。

      {todos.map(message =>

        <Item key={message} message={message} />

      )} 

    </ul>

  );

}

Function as Children

见标黄的代码.React.createElement(component, props,...child)

function Repeat(props) {

  let items = [];

  for (let i= 0; i < props.numTimes; i++) {

    items.push(props.children(i));

  }

  return <div>{items}</div>;

}

function ListOfTenThings() {

  return (

    <Repeat numTimes={10}>

      {(index) => <div key={index}>{index}:This is item {index}</div>}

    </Repeat>

  );

}

Booleans, Null, and Undefined are Ignored.

false ,null, undefined, true都是验证的孩子，不过它们不渲染。

所以可以作为条件判断 condition && expression。

如果showHeader是true则渲染<Header />

<div>

  {showHeader && <Header />}

  <Content />

</div>

⚠️ 0会被渲染

如果要让true渲染使用类型转换,String()。

---

Typechecking With PropTypes（未看）

用于检查输入的一个方法PropTypes ,这是React内置的方法，JS扩展中也有Flow,TypeScript等扩展插件。

大型的代码检查，官方推荐使用Flow or TypeScript 而不是用默认的。

https://reactjs.org/docs/typechecking-with-proptypes.html

PropTypes输出了一组验证器用于确保你接收的数据是通过验证的。如果一个未通过验证的值提供给一个prop，一条warning会显示在JS console中。propTypes只用于开发模式。

import PropTypes from 'prop-types';

class Greeting extends React.Component {

  render() {

    return (

      <h1>Hello, {this.props.name}</h1>

    );

  }

}

Greeting.propTypes = {

  name: PropTypes.string    //确保是string类的值，否则报告⚠️信息。

};

---

Refs ans the DOM(未看)

https://reactjs.org/docs/refs-and-the-dom.html

在典型的数据流模式，组件之间的交互使用props。但有少数情况属于例外情况。

Refs提供了一个方法，能够使用DOM nodes 和React elements created in the render method。React提供了这个escape hatch逃生舱门。

何时用：

• 管理focus,text selection ,media playback
• 合并第三方DOM库
• 打开必要的动画Triggering imperative animations

React.createRef:

创建一个ref可以附加到React elements

this.myRef = React.createRef() 并通过ref属性付给React元素

---

Uncontrolled Components

推荐使用controlled components 来实现forms, 这时，表格数据被React组件处理。

但我们也可以用别的方式，这时，表格data被DOM自身处理。

既然非控制组件保持了DOM的原生性，有时它比较容易合并React和非React代码。如果你想要更快并不在乎代码太脏（可读性差），也能够稍微少输入点代码。

你应该尽量用可控制的组件。

https://codepen.io/gaearon/pen/WooRWa?editors=0010

红字是用原生DOM加ref。

class NameForm extends React.Component {

  constructor(props) {

    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);

    this.handleTextChange = this.handleTextChange.bind(this);

    this.state = {text: ""};

  }

  

  handleTextChange(e) {

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

  }

  

  handleSubmit(e) {

    // alert("A name was submitted: " + this.input.value);

    alert("A name was submitted: " +  this.state.text);

    e.preventDefault();

  }

  

  render() {

    return (

      // <form onSubmit={this.handleSubmit}>

      //   <label>

      //     Name:

      //     <input type="text" ref={(input) => this.input = input}  />

      //   </label>

      //   <input type="submit" value="Submit" />

      // </form>

      <form>

        <label>

          Name:

          <input type="text" onChange={this.handleTextChange}/>

        </label>

        <input type="submit" value="Submit" onClick={this.handleSubmit} />

      </form>

    );

  }

}

ReactDOM.render(

  <NameForm />,

  document.getElementById('example')

);

---

Optimizing Performance(略读)

优化执行的方法和工具。

使用React Developer Tools for Chrome.(也有其他浏览器版本)

这个工具可以制作Timeline可视化每个组件mount update, unmount.

---

Context(一个不使用传统方法传递数据的方法。)

https://reactjs.org/docs/context.html

一整章节，暂时不看。

---

Fragments

让你返回多个元素在一个render()方法中，不需要创建一个额外的DOM 元素。

The React.Fragment component lets you return multiple elements in a render()method without creating an additional DOM element:

render() {

  return (

    <React.Fragment>

      <ChildA />

      <ChildB />

      <ChildC />

    </React.Fragment>

  );

}

这时如果是静态的可以不加key，最好加上。另外用[]也可以，但必须加key

HTML description list:

<dl>

<dt>

<dd></dd>

</dt>

</dl>

---

Portals

大门，入口。

https://reactjs.org/docs/portals.html

渲染孩子进入一个Dom节点

ReactDOM.createPortal(child,container)

第一个参数是任意的渲染的React child。如an element, string, or fragment.

第二个参数container是一个DOM元素。

一般来说，从一个组件的渲染方法中返回一个元素，它作为孩子附加在离它最近的父节点后。

而使用createPortal这样就可以插入一个孩子到DOM中不同的位置。 （但仍然受到父组件event事件的影响）

案例：https://codepen.io/gaearon/pen/yzMaBd?editors

    return (

      <div className="app">

        This div has overflow: hidden.

        <button onClick={this.handleShow}>Show modal</button>

        {modal}  //看似是在这个block中，其实Modal组件使用了createProtal()把自己插入到了其他DOM节点。

      </div>

    );

Event Bubbling Through Portals

a portal可以插入到在DOM tree的任何位置，不过它在其他方面仍旧是一个普通的React child。

假如：在一个父组件中渲染一个子组件（Modal），那么Modal就可以被这个父组件捕捉到。这个父组件不会考虑Modal是否用了protals。

即便Modal用了protal把代码插入到不属于父组件的其他节点，父组件仍然可以捕捉到Modal，父组件定义了一个点击事件，对Modal中的元素进行点击也会触发父组件的点击事件。

案例：https://codepen.io/chentianwei411/pen/ZoLeBE?editors=0010

---

Error Boundaries

错误边界。 目的：解决仅仅是部分UI的错误就会造成整个app崩溃的问题。

Error boundaries也是一个React组件。JS 错误发生在子组件的任何位置，它都可以捕捉到，并且log those errors, 并且display a fallback UI。

Error boundaries 捕捉错误是在渲染的时候，因此lifecycle methods 和 constructors of the whole tree都低于Error boundaries.

⚠️以下超出了Error-b的使用范围：

Event handlers, 异步代码, 服务器端渲染， 自身抛出错误。

---

Higher-Order Components (基本用法，一些约定没有看。)

一种代码的抽象化, 根据dry原则，把有相同逻辑的组件重构。

即重构一个函数，这个函数接受一个组件并return 一个新组件。

要点：发现有很多相同逻辑（内部代码基本一样）的组件， 为了减少代码的量和便于阅读维护。

https://reactjs.org/docs/higher-order-components.html

// 调用Highter-Order组件withSubscription.把返回的新组件存入一个JSX.

const CommentListWithSubscription = withSubscription(

CommentList,

(DataSource) => DataSource.getComments()

);

const BlogPostWithSubscription = withSubscription(

  BlogPost,

  (DataSource, props) => DataSource.getBlogPost(props.id)

);

function withSubscription(WrappedComponent,  selectData) {

//WrappedComponent是组件名字， selectData是数据及其使用的methods。

return class extends React.Component {...} ;  //class后面没有组件名字

}

⚠️ ，不要在higher-order组件中对原有组件修改，如果需要组件进行功能的变化，把这个变化写在return中。

⚠️， 约定convension: 传递不相关的props，通过wrapped 组件。 在render方法中使用不相关的props.

---

Render Props

术语render prop是一个简单的技术：在React组件之间，通过使用一个值是函数的prop来分享代码。

The term "render prop" refers to a simple technique for sharing code between React components using a prop whose value is a function.

<DataProvider render={data => (

  <h1>Hello {data.target}</h1>

)}/>

一个组件带着一个render prop,这个组件渲染的时候可以使用这个render prop的值

a render prop is a function prop that a component uses to know what to render.

https://reactjs.org/docs/render-props.html

---

---

React.Component

组件的lifecycle methods

Methods prefixed with will are called right before sth happens. did are called after sth happens.

Mounting

这些方法在一个组件实例被创建和插入DOM时调用。

constructor(props){...}   //在加载组件前调用。

before it is mounted,如果组件是一个子类，还需要在其他声明前面调用super(props)。 constructor()用于初始化state。也用于bind event-handlers to the class instance.

分配给this.state的对象可以包含props。但⚠️这不是时时更新的，最好不这么用，例子：

  this.state = {

    color: props.initialColor

  };

UNSAFE_componentWillMount()   //在加载组件前引用。它在render()前调用。

render()

When called, it should examine this.props and this.state and return one of the following types:

• React elements. 包括自定义的组件或原生的DOM component <div />
• String and numbers. 作为text nodes 渲染在DOM中。
• Portals. Created with ReactDOM.createPortal
• null 什么也不加载
• Booleans。一般用于 return test && <Child />模式,当test是true时，加载后面

⚠️ shouldComponentUpdate()方法返回false时，不加载render()

componentDidMount()   //在组件加载后立即引用

用途：

加载远程endpoint的数据，这里可以实例化network request。

也可以建立任何订阅并配合componentWillUnmount()取消订阅。

调用setState()，会激活额外的rendering.

Updating

一个update会被props或state的改变引起。下面的方法当一个组件被再加载时调用。（只看了其中几个，一共7个方法）

componentWillReceiveProps()

在一个已经加载的组件再次接收新的props之前引用这个方法。 这个方法限制很多不推荐用。

shouldComponentUpdate(nextProps, nextState)

返回true,false。让React知道一个组件的输出是否被当前state or propsde 变化所影响。如果是true，则组件再render()。方法默认是true。所以一般不主动使用这个方法。

如果是false，render(), componentWillUpdate(), componentDidUpdate()不会调用。

componentWillUpdate(nextProps, nextSate)

当一个新props or state 被接收到后，在渲染之前引用。

render()

每次更新props or state后，调用render().

componentDidUpdate(prevProps, prevState, snapshot)

在更新发生后，立即引用。

Unmounting

• componentWillUnmount(): 在一个组件被卸载和删除前立即引用。用于执行必要的清洁。如未验证的timers, 取消网络请求， 清洁任何在componentDidMount()中的订阅

Error Handing

• componentDidCatch():这个方法被调用当一个❌发生在渲染中，在lifecyle方法中，或者在一个孩子组件的constructor中。

Other APIS

setState()

enqueuqs changes to the component state and tells React that this component and its children need to be re-rendered with the updated state.

改变组件的状态state并告诉React“组件和它的孩子需要根据更新的state再渲染”

这是一个主要的方法，用来更新user interface in response，事件处理和服务器响应。

把setState()当作一个request,而不是更新组件的即时命令。

setState()不总是立即执行更新组件，因为它类似request，有延迟。因此，使用componentDidUpdate或者setState(updater, callback)可以保证fire（立即执行）.

setState(updater, callback)

updater是一个函数：(prevState, props) => stateChange   //prevState是之前state的一个引用。 例子：用props.step增加一个值到state中。

this.setState((prevState, props) => {

  return {counter: prevState.counter + props.step};

}); 

callback参数是可选的函数。在setState完成更新，组件被再渲染后执行这个函数，推荐使用componentDidUpdate代替。

第一个参数可以是一个对象object.代替一个函数。 这个执行会把状态变化合并到新状态中。

this.setState({quantity: 2})

forceUpdate()

component.forceUpdate(callback),如果render()方法依靠其他数据源，你可以告诉组件调用forceUpdate()来再渲染。个人理解：这个方法就是用来执行渲染的。

Class Properties

defaultProps

给组件的property设定默认值。

class CustomButton extends React.Component {

  // ...

}

CustomButton.defaultProps = {

  color: 'blue'

};

渲染的时候自动增加上color="blue"

render() {

  return <CustomButton /> ; // props.color will be set to blue

}

displayName

https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging

debug用。

Instance Properties

• props

• state

---

---

ReactDOM

import ReactDOM from 'react-dom'

react-dom package提供了DOM-specific methods。大多数组件不需要使用这个module.

ReactDOM.render(element, container[, callback])

渲染一个React element到DOM中。具体位置是container, 返回a reference 给组件。

如果之前已经渲染进container中，更新时只修改必要的部分。

callback可选，在组件渲染或更新后执行.\

createPoratal()

ReactDOM.createPortal(child, container)

hydrate()
unmountComponentAtNode()
findDOMNode()

---

ReactDOMServe

import ReactDOMServer from 'react-dom/server';

用于把组件渲染到静态标记中，一般用于一个Node server

这两个方法可以用于server，也可以用在浏览器。

renderToString()

renderToStaticMarkup()

ReactDOMServer.renderToString(element)

渲染一个React元素到 原始HTml. React返回一个HTML string。

---

DOM Elements

https://reactjs.org/docs/dom-elements.html

style

style属性可以接受JS 对象。属性要用驼峰写法。如backgroundImage. px可以省略

const divStyle = {

  color: 'blue',

  background: 'lightblue',

};

function Hello() {

  return <div style={divStyle}>Hello World!</div>;

}

value

<input>, <textarea>组件支持value属性。

className

用来指定css class的名字。

checked

<input>组件中的type类型为checkbox or radio的支持这个属性。

All Supported HTML Attributes

---

SyntheticEvent

人工事件

event handlers被传到人工事件的实例，一个跨浏览器的包裹器（包含浏览器的原生事件）。

每个SyntheticEvent对象有一系列的属性attributes:如：

currentTarget, target, type, timeStamp, isTrusted, preventDefault()等等。

https://reactjs.org/docs/events.html