react基础知识和搭建一个简单的登陆页面

一：概念

• React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
• 用来构建UI的 JavaScript库
• React 不是一个 MVC 框架，仅仅是视图（V）层的库

二：关于React你需要知道

1: React基本使用

• 安装：npm i -S react react-dom
• react：react 是React库的入口点
• react-dom：提供了针对DOM的方法，比如：把创建的虚拟DOM，渲染到页面上

// 1. 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 创建 虚拟DOM
// 参数1：元素名称  参数2：元素属性对象(null表示无)  参数3：当前元素的子元素string||createElement() 的返回值
const divVD = React.createElement('div', {
  title: 'hello react'
}, 'Hello React！！！')

// 3. 渲染
// 参数1：虚拟dom对象  参数2：dom对象表示渲染到哪个元素内 参数3：回调函数
ReactDOM.render(divVD, document.getElementById('app'))

通过上面你就能完成一个React的基本渲染。

2:关于jsx

由于createElement()方式，代码编写不友好，太复杂，所以React官方为我们提供了jsx.

基本使用：

• 注意：JSX语法，最终会被编译为 createElement() 方法
• 推荐：使用 JSX 的方式创建组件
• JSX - JavaScript XML
• 安装：npm i -D babel-preset-react （依赖与：babel-core/babel-loader）

/* 1 在 .babelrc 开启babel对 JSX 的转换 */
{
  "presets": [
    "env", "react"
  ]
}

/* 2 webpack.config.js */
module: [
  rules: [
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
  ]
]

/* 3 在 js 文件中 使用 JSX */
const dv = (
  <div title="标题" className="cls container">Hello JSX!</div>
)

/* 4 渲染 JSX 到页面中 */
ReactDOM.render(dv, document.getElementById('app'))

注意：jsx的代码会最终被编译成createElement()

3: 关于React组件的创建

• 通过 JS函数 创建（无状态组件）: 仅仅是为了展示数据，那么此时就可以使用 函数组件
• 通过 class 创建（有状态组件）: 有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件
• Hooks（高阶组件）: 终极合体，又是无状态组件和能操作数据

使用函数创建一个组件（无状态组件）

function Welcome(props) {
  return (
    // 此处注释的写法 
    <div className="shopping-list">
      {/* 此处 注释的写法 必须要{}包裹 */}
      <h1>Shopping List for {props.name}</h1>
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
      </ul>
    </div>
  )
}

ReactDOM.render(
  <Welcome name="jack" />,
  document.getElementById('app')
)

使用Class创建一个组件（有状态组件）

//  react对象继承字React.Component
class ShoppingList extends React.Component {
  constructor(props) { 
    super(props)
  }
  // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
        </ul>
      </div>
    )
  }
}

创建一个高阶组件
https://www.jianshu.com/p/bdc...

4：关于数据props和state

• props: 给组件传递数据，一般用在父子组件之间

function Welcome(props) {
  // 返回的 react元素中必须只有一个根元素
  return <div>hello, {props.name}</div>
}

class Welcome extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

• state:用来给组件提供组件内部使用的数据

class Hello extends React.Component {
  constructor() {
    super()

    this.state = {
      gender: 'male'
    }
  }

  render() {
    return (
      <div>性别：{ this.state.gender }</div>
    )
  }
}

• 受控组件和非受控组件

关于state和props又繁衍出两个概念，受控组件和非受控组件。类似于props这种，他所有的状态都是来自于外部，那么他的显示则完全由外部觉得，我们可以说他是一个受控组件。像state这种，他有他自己组件的状态，并不受外部的控制，所以我们可以认为他是一个非受控组件

• setState

如何更新state呢，直接更改state其实可以的，不过这样子无法触发组件视图的更新机制。所以使用setState()api。

import * as React from 'react'

class Child extends React.Component {
  state = {
      name: '小明'
  }

  constructor(props) {
     super(props) 
     this.update = this.update.bind(this)
  }

  update(e) {
      this.setState({
          name: e.target.value
      })
  }

  render() {
    return (<div>
      <input onChange={this.update} value={this.state.name}/>
    </div>)
  }
}

• props校验

React为我们提供了一个对于props格式验证的插件：prop-types

// 引入模块
import PropTypes from 'prop-types'

// ...以下代码是类的静态属性：
// propTypes 静态属性的名称是固定的！！！
static propTypes = {
  initCount: PropTypes.number, // 规定属性的类型
  initAge: PropTypes.number.isRequired // 规定属性的类型，且规定为必传字段
}

5:关于生命周期

一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

React生命周期包括：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）

一下是生命周期的所有钩子函数（*代表常用的）：

创建阶段：

• constructor()：获取props，初始化state
• componentWillMount() ： 组件被挂载到页面之前调用，其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲染。 *
• render()：渲染组件到页面中，无法获取页面中的DOM对象
• componentDidMount()：组件已经挂载到页面中 *

运行阶段：

• componentWillReceiveProps()：组件接受到新的props前触发这个方法
• shouldComponentUpdate()：根据这个方法的返回值决定是否重新渲染组件，返回true重新渲染，否则不渲染
• componentWillUpdate()：组件将要更新 *
• render()：重新渲染组件，与Mounting阶段的render是同一个函数
• componentDidUpdate()：组件已经被更新 *

卸载阶段：

• componentWillUnmount()：在卸载组件的时候，执行清理工作 *

6: react-router

基本使用：

// 1 引入
import {
  HashRouter as Router,
  Link, Route
} from 'react-router-dom'

// 2 使用 <Router>
<Router>
  <Switch>
    // exact 表示：绝对匹配（完全匹配，只匹配：/）
    <Route exact path="/" component={HomeContainer}></Route>
    <Route path="/movie" component={MovieContainer}></Route>
    <Route path="/about" component={AboutContainer}></Route>
  </Switch>
</Router>

• 关于路由传参

<Route path="/movie/:movieType"></Route>

• 路由跳转

this.props.history.push('/movie/movieDetail/' + movieId)

7:关于Redux(这个不说了，东西太多，有时间单写一篇介绍这个的博客)

好了，关于React的知识就差不太多了，有时候学习一个框架就是这么简单。

三：搭建一个简单登陆页

1:使用 create-react-app 快速构建 React 开发环境

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

项目运行起来之后，你会得到下面的界面。

2: React中引入antd

antd地址：https://ant.design/index-cn

第一步：npm i antd --save
第二步：npm i react-app-rewired -D 后更改package.json文件

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

第三步：安装按需加载插件 npm install babel-plugin-import
第四步： npm install customize-cra --save
第四步：在项目根目录创建一个 config-overrides.js 用于修改默认配置。

   const {
      override,
     fixBabelImports
   } = require("customize-cra");
   
   module.exports = override(
     fixBabelImports("babel-plugin-import", {
       libraryName: "antd",
       style: "css"
     })
   );

3:登陆页面代码

改造app.js为如下代码

import React from "react";
import "./App.css";

import { Form, Input, Button, Card} from 'antd';

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const App = () => {
  // 提交表单且数据验证成功后回调事件
  const onFinish = values => {
    console.log('Success:', values);
  };

  // 提交表单且数据验证失败后回调事件
  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  return (
  <Card title="登陆页面" className="login-form">
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="用户名"
        name="用户名"
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="密码"
        rules={[
          {
            required: true,
            message: '请输入密码',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          登陆
        </Button>
      </Form.Item>
    </Form>
  </Card>
  );
};

export default App

项目级React目录结构：

至此，学会上面的东西虽然只是入门，但是已经可以去上手写项目了，更多关于React的理解和运用就需要你去真正的项目中去磨练了。