简单认识 React

构建用户界面的 JavaScrtip 库

不是框架

React 主观意愿

  1. React 仅仅负责View层渲染
  2. 是一个视图渲染的工具库，不做框架的事情

只负责视力渲染，不要要求干其他的事情

简单使用 React

React.Component()
React.createElement()
ReactDOM.render()

怎么负责视图

  1. 添加根容器.

<div id='app'></div>

  1. 引入 CDN 脚本

  2. 创建 React 组件

    • React -> React API 处理视图的API集合

    • 一个 React 组件

      1. 继承 React.Component
      2. render 函数返回一个视图 ```javascript class MyButton extends React.Component { constructor(props){ super(props);

      this.state = { openStatus: false } }

    // state = { openStatus: false} // 也可以在这里定义state render() { const oP = React.createElement( ‘p’, {

    1.  className: 'text',
    2.  key: 1,

    }, this.state.openStatus ? ‘打开状态’ : ‘关闭状态’； );

    const oBtn = React.createElement( ‘button’, {

    1.  key:2,
    2.  onClick: () => this.setState({
    3.      openStatus: !this.state.openStatus
    4.  })

    }, this.state.openStatus ? ‘关闭’ : ‘打开’； )

    const wrapper = React.createElement(

    1.  'div',

    {

    1.    className: 'wrapper'

    }, [oP, oBtn] )

    return wrapper; } }

ReactDOM.render({ React.createElement(MyButton), docment.getElementById(‘app’); });

  2.    - ReactDOM -> 从render -> 虚拟DOM -> 真实DOM
  3. ```javascript
  4. var span = React.createElement('span', {
  5.     className: 'text',
  6.   key: 1
  7. }, 'This is a span');
  9. ReactDOM.render({
  10.     React.createElement('div', {
  11.           'data-tag': 'div'
  12.   }, [span]
  13.   ),
  14.   docment.getElementById('app');
  15. });
  1.   - ReactDOM.render() 
  2.      - 可以传入元素或组件
  3.         - React.createElement 创建虚拟节点
  4.            - 节点名，属性，子节点
  5.         - React.component
  6.      - 挂载的DOM节点

工程化

创建React 17.0.2版本的要求

  • Node >= 10.16
  • NPM >= 5.6

npx create-react-app my-react-app

构建工程化项目

  • npx npm5.2+ 包运行工具
  • create-react-app 内部的工程化
    • babel / Webpack

cd my-react-app & yarn start 打开并运行
yarn build 构建