react学习要点记录JSX是JS的扩展，JSX 是在 JavaScript 内部实现的，推荐在 React 中使用 J

一个最简单的js react class component怎么写
1. 写个demo
Jsx是什么，怎么用
1. zh-hans.reactjs.org/docs/introd…
2. zh-hans.reactjs.org/docs/handli…
state和props的区别
setState
React常用的生命周期
1. projects.wojtekmaj.pl/react-lifec…
高阶
组件库版本3.x
1. 3x.ant.design/docs/react/…
TS 的 interface
TS 的范型
Css in Js: styled-component 1.JSX定义：

JSX是JS的扩展，JSX 是在 JavaScript 内部实现的，推荐在 React 中使用 JSX 来描述用户界面。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。

JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

编译过程中： Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

2.setState：

state 是私有的，并且完全受控于当前组件。

“自上而下”或是“单向”的数据流

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

3.React DOM 渲染：

可以安全地在 JSX 当中插入用户输入内容，React DOM 在渲染所有输入内容之前，默认会进行转义。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

4.元素：

元素是构成react的最小砖块，组件是有元素构成，元素渲染是通过ReactDom.render()函数进行

5.组件

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

函数式组件：接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

es6 class式组件：

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

组件的命名：组件名称必须以大写字母开头，React 会将以小写字母开头的组件视为原生 DOM 标签。比如

可提取为组件的特征： UI 中有一部分被多次使用；组件本身够复杂。

6. 事件：

React 事件的命名采用小驼峰式（camelCase），而不是纯小写；

使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

阻止事件的默认行为不能使用return false;而应该使用e.preventDefault();

在构造器中为事件绑定this.handleEvent = this.handleEvent.bind(this)

调用回调函数时可以使用箭头函数：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

向事件传递参数的两种方式：

// 第一种：React 的事件对象 e 会被作为第二个参数传递
// 第二种：事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>