React 基础.md

1. 基本引入 js，最后的 <script> 标签是text/babel是因为JSX语法

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>//核心库
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>//react提供与 DOM 相关的功能
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>//转换成浏览器可以识别的语言
<script type="text/babel">
      // ** Our code goes here! **
 </script>

2. 什么是 jsx?
   JSX语法非常适合表示嵌套的HTML元素
   const element = <h1>Hello, world!</h1>;
   小括号()把JSX包起来 包括{}也是jsx语法
   因为JSX更接近于javascripte而不是html，所以ReactDom标签的参数名用驼峰命名法命名而不是html标签的命名
   JSX实际上就是Javascript中的对象
   Babel解释JSX的时候会调用React.createElement()这个函数
3. ReactDOM.render()
   是 react 最基本的方法
   用于将模板转为 HTML 语言，并插入指定的 DOM 节点
4. 创建一个组件
   原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

5. React State(状态)
   React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
   这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。
6. React Props
   state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
7. React 事件处理
   React 事件绑定属性的命名采用驼峰式写法，而不是小写。
   在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 你必须明确的使用 preventDefault。

<button onClick={activateLasers}>
  激活按钮
</button>

要记得绑定 this，不然就用 es6 的箭头函数

 this.handleClick = this.handleClick.bind(this);

8. React 条件渲染
   React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。
   隐藏的话使用 warn 属性
9. React 列表 & Keys
   使用 map() 方法遍历数组
10. React 组件 API
    设置状态：setState
    替换状态：replaceState
    设置属性：setProps
    替换属性：replaceProps
    强制更新：forceUpdate
    获取DOM节点：findDOMNode
    判断组件挂载状态：isMounted
11. React 组件生命周期
    componentWillMount在渲染前调用,在客户端也在服务端。
    componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
    componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
    shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
    componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
    componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
12. React AJAX
    React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
13. React 表单与事件