共计 5647 个字符,预计需要花费 15 分钟才能阅读完成。
一:概念
- 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>
)
}
}
创立一个高阶组件
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 的了解和使用就须要你去真正的我的项目中去磨难了。