受欢迎的锦州网站建设,wordpress 加密功能,搜索郑州网站,如室室内设计官网1、React简介
1.1、React概述
React 是用于构建用户界面的 javascript 库#xff0c;具有声明式、组件化等特点。
1.2、MVC和MVVM模式
MVC#xff08;Model-View-Controller#xff0c;模型-视图-控制器#xff09;#xff0c;Model指模型数据#xff0c;View是显示的…1、React简介
1.1、React概述
React 是用于构建用户界面的 javascript 库具有声明式、组件化等特点。
1.2、MVC和MVVM模式
MVCModel-View-Controller模型-视图-控制器Model指模型数据View是显示的界面Controller是控制层控制层用于接收到用户的操作然后进行一系列的处理后发送给Model接收到Model的响应后再交给View视图层。
MVVMModel-View-ViewModel模型-视图-视图模型Model指模型数据View是指浏览器渲染的网页ViewMode是Model和View的桥梁称为视图模型由ViewModel完成数据的绑定。
在Vue中JS对象就是ModelHTML标签就是ViewVue实例就是ViewModel。
2、React环境搭建
2.1、使用webpack搭建React开发环境
参考博客https://blog.csdn.net/p445098355/article/details/104517094
2.2、使用create-react-app脚手架
安装脚手架
cnpm i -g create-react-app创建项目
create-react-app 项目名称3、JSX语法
jsx 全程是 javascript XML 是一个 JavaScript 的语法扩展。jsx 要按照 xml 的编写规范即
最外层只能有一个根标记每个标记都必须要有闭合标签
在 jsx 中可以使用 {...} 来编写 javascript 表达式。
4、React组件
4.1、函数组件
使用构造函数声明的组件被称为函数组件因其内部没有 state 属性所以又被称为无状态组件代码如下
import React from react;
import ReactDOM from react-dom;const App () {return (div函数组件/div)
}ReactDOM.render(App /,document.getElementById(root));可以通过 props 属性获取到组件标签上定义的属性值例如
import React from react;
import ReactDOM from react-dom;const App (props) {return (div函数组件props值 {props.name}/div)
}ReactDOM.render(App nameTom /,document.getElementById(root));4.2、类组件
使用 class 关键字创建的组件称为类组件因其内部可以有 state 属性又被称为有状态组件代码如下
import React from react;
import ReactDOM from react-dom;class App extends React.Component {render() {return (div类组件/div)}
}ReactDOM.render(App nameTom /,document.getElementById(root));在使用类组件的标签时标签上定义的属性都会通过类组件的构造函数传递到组件内部然后在组件内容使用 this.props 获取到外界的传值代码如下
import React from react;
import ReactDOM from react-dom;class App extends React.Component {//构造函数constructor(props){super(props)console.log(props)}render() {return (div类组件props值 {this.props.name}/div)}
}ReactDOM.render(App nameTom /,document.getElementById(root));每个类组件都有自己独享的内部状态即 state 属性。如果要操作 state 必须要使用 setState() 函数该函数是一个异步函数对 state 修改后会再次调用 render() 函数重新渲染页面。
class App extends React.Component {//构造函数constructor(props){super(props)this.state {value: hello}}//按钮点击事件接收到视图层的指令操作数据模型最后在把操作结果返回给视图handleClick(str){this.setState({value: str})}render() {return (div{this.state.value}button onClick{this.handleClick.bind(this,world)}修改state/button/div)}
}ReactDOM.render(App nameTom /,document.getElementById(root));4.3、函数组件和类组件的区别
在说明函数组件和类组件的区别时要看3个方面
组件内是否有 this 组件内是否有 state ;组件内是否有生命周期钩子
只要符合上面的3点就是一个有状态组件即类组件。
4.4、组件通信
父组件向子组件传值
import React from react;
import ReactDOM from react-dom;
// import App from ./App;class App extends React.Component {render(){return (div{/* 自定义组件可以在组件上自定义属性 */}Button text百度一下 subText点击提交数据 textColorred//div)}
}//无状态组件只显示UI效果没有太多的业务逻辑
const Button (props) {return (button title{props.subText} style{{color: props.textColor}}{props.text}/button)
}ReactDOM.render(App nameTom /,document.getElementById(root));子组件向父组件传值
import React from react;
import ReactDOM from react-dom;
// import App from ./App;class App extends React.Component {//自定义组件的点击事件text为默认参数即封装Button组件时传入的一个参数handleClick(text){console.log(自定义组件被点击了。。。。,text)}render(){return (div{/* 自定义组件可以在组件上自定义属性也可以自定义事件 */}Button text百度一下 subText点击提交数据 textColorred onClick{this.handleClick.bind(this)}//div)}
}//无状态组件只显示UI效果没有太多的业务逻辑
const Button (props) {return (button title{props.subText} style{{color: props.textColor}} onClick{(){props.onClick(props.text)}}{props.text}/button)
}ReactDOM.render(App nameTom /,document.getElementById(root));4.5、封装自定义组件
自定义按钮组件
import React, { Component } from reactexport default class Button extends Component {//HTML的button标签原生点击事件函数handleClick(){this.props.onClick()}render() {return (divbutton style{{color: this.props.fontColor}} onClick{this.handleClick.bind(this)}{this.props.text}/button/div)}
}自定义输入框组件
import React, { Component } from reactexport default class Input extends Component {//input标签原生键盘事件的函数handlePress(e){if(e.charCode 13){this.props.onEnter(e.target.value)}}render() {return (divinput onKeyPress{this.handlePress.bind(this)}/input/div)}
}在父组件中使用自定义组件
import React, { Component } from react
import Button from ./Button
import Input from ./Inputexport default class App extends Component {handleClick(){console.log(click....)}//Input组件上的回车事件handleEnter(val){console.log(enter...,val)}render() {return (divInput onEnter{this.handleEnter.bind(this)}/InputButton text提交 fontColorred onClick{this.handleClick.bind(this)}/Button/div)}
}5、UI组件库
5.1、使用Element-React组件库
需要安装
# 安装element-react
cnpm i element-react --save# 安装elementui的主题
cnpm install element-theme-default --save# 按钮react-hot-loader
cnpm install react-hot-loadernext -DButton组件使用案例
import React, { Component } from react
import {Button
} from element-react
import element-theme-defaultexport default class App extends Component {constructor(){super()this.state {isLoading: false,btnText: 点击下载}}handleLoading (){this.setState({btnText: 下载中,isLoading: true},(){//模拟下载过程setTimeout((){this.setState({btnText: 下载完成,isLoading: false})},2000)})}render() {return (divButton typeinfo loading{this.state.isLoading} onClick{this.handleLoading}{this.state.btnText}/ButtonButton上传i classNameel-icon-upload2/i/Button/div)}
}Menu和Table组件的使用案例
import React, { Component } from react
import {Button,Menu,Table
} from element-react
import element-theme-defaultexport default class App extends Component {constructor(){super()this.state {column: [{label: 姓名,prop: name},{label: 年龄,prop: age},{label: 电话,prop: phone},{label: 操作,render: (obj,e,index){ //渲染函数的默认参数为当前点击的数据对象return (React.FragmentButton typeinfo sizesmall修改/Button nbsp;nbsp;Button typedanger sizesmall删除/Button/React.Fragment)}}],data: [{name: 张三,age: 20,phone: 13099998888},{name: 李四,age: 21,phone: 13099998888},{name: 王五,age: 22,phone: 13099998888}]}}render() {return (divMenu modehorizontal themedark defaultActive1 style{{marginBottom: 20px}}Menu.Item index1首页/Menu.ItemMenu.SubMenu index2 title新闻Menu.Item index2-1国内新闻/Menu.ItemMenu.Item index2-2国际新闻/Menu.ItemMenu.Item index2-3社会新闻/Menu.Item/Menu.SubMenu/MenuTable style{{width: 100%}} columns{this.state.column} data{this.state.data}/Table/div)}
}
5.2、Ant Design UI库
安装
cnpm i antd --save引入组件
# 按需引入
import { DatePicker } from antd;# 引入样式
import antd/dist/antd.css; // or antd/dist/antd.less6、路由
BrowserRouter
BrowserRouter 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。一个应用程序中只需要有一个 BrowserRouter 即可。
在 index.js 中使用
import React from react;
import ReactDOM from react-dom;
import App from ./App;
import {BrowserRouter} from react-router-domReactDOM.render(BrowserRouterApp //BrowserRouter,document.getElementById(root));HashRouter
HashRouter 使用 URL 的 hash 部分即 window.location.hash来保持 UI 和 URL 的同步。与 BrowserRouter 用法类似但是 HashRouter 在页面中显示的路由地址里有 # 符号。
import React from react;
import ReactDOM from react-dom;
import App from ./App;
import {HashRouter} from react-router-domReactDOM.render(HashRouterApp //HashRouter,document.getElementById(root));Link
为你的应用提供声明式的、可访问的导航链接。
import { Link } from react-router-dom;Link to/aboutAbout/Link配合 Route 使用。
Route
Route 可能是 React Router 中最重要的组件它可以帮助你理解和学习如何更好的使用 React Router。它最基本的职责是在其 path 属性与某个 location 匹配时呈现一些 UI。
import { BrowserRouter as Router, Route } from react-router-dom;RouterdivRoute exact path/ component{Home} /Route path/news component{News} //div
/RouterLink、Route配合使用案例
import React, { Component } from react
import {Menu} from element-react
import element-theme-default
import {Link,Route,Switch} from react-router-domexport default class App extends Component {render() {return (divMenu modehorizontal themedark defaultActive1 style{{marginBottom: 20px}}Menu.Item index1首页/Menu.ItemMenu.SubMenu index2 title新闻Menu.Item index2-1Link to/guonei国内新闻/Link/Menu.ItemMenu.Item index2-2Link to/guoji国际新闻/Link/Menu.ItemMenu.Item index2-3Link to/shehui社会新闻/Link/Menu.Item/Menu.SubMenu/MenuSwitchRoute path/guonei component{GuoneiNews}/RouteRoute path/guoji component{GuojiNews}/RouteRoute path/shehui component{ShehuiNews}/Route/Switch/div)}
}参考博客https://www.jianshu.com/p/97e4af32811a
7、Redux状态管理
Store
用于连接 action 和 reducer 重要对象一个redux应用程序中只能有一个 store 对象。
import { createStore } from redux
import todoApp from ./reducers
let store createStore(todoApp)Reducer
Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的记住 actions 只是描述了有事情发生了这一事实并没有描述应用如何更新 state。
Action
Action 是把数据从应用译者注这里之所以不叫 view 是因为这些数据有可能是服务器响应用户输入或其它非 view 的数据 传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。
const action {type: ADD_TODO,text: Build my first Redux app
}核心API
在使用redux时需要掌握的核心API
store.getState() 用于获取最新的store对象store.subscrbe() 用于监听store中的数据变化store.dispatch() 用于向reducer派发action对象
