React入门看这篇就够了
发布时间：2020-12-15 06:35:58 所属栏目：百科 来源：网络整理
导读：react - JSX React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 什么是
react - JSXReact 背景介绍
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 什么是React
特点
> JSX --TO--> EveryThing - JSX --> HTML - JSX --> native ios或android中的组件（XML） - JSX --> VR - JSX --> 物联网 为什么要用React
React中的核心概念
虚拟DOM（Vitural DOM）React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率
VituralDOM的处理方式
Diff算法
当你使用React的时候，在某个时间点 render() 函数创建了一棵React元素树， <!-- 了解： 有一些解决将一棵树转换为另一棵树的最小操作数算法问题的通用方案。然而，树中元素个数为n，最先进的算法 的时间复杂度为O(n3) 。 如果直接使用这个算法，在React中展示1000个元素则需要进行10亿次的比较。这操作太过昂贵，相反，React基于两点假设，实现了一个O(n)算法，提升性能： -->
Diff算法的说明 - 1
// 旧树 <div> <Counter /> </div> // 新树 <span> <Counter /> </span> 执行过程：destory Counter -> insert Counter Diff算法的说明 - 2
// 旧
<div className="before" title="stuff" />
// 新
<div className="after" title="stuff" />
只更新：className 属性
// 旧
<div style={{color: 'red',fontWeight: 'bold'}} />
// 新
<div style={{color: 'green',fontWeight: 'bold'}} />
只更新：color属性
Diff算法的说明 - 3
// 旧 <ul> <li>first</li> <li>second</li> </ul> // 新 <ul> <li>first</li> <li>second</li> <li>third</li> </ul> 执行过程： React会匹配新旧两个<li>first</li>，匹配两个<li>second</li>，然后添加 <li>third</li> tree
// 旧 <ul> <li>Duke</li> <li>Villanova</li> </ul> // 新 <ul> <li>Connecticut</li> <li>Duke</li> <li>Villanova</li> </ul> 在没有key属性时执行过程： React将改变每一个子删除重新创建，而非保持 <li>Duke</li> 和 <li>Villanova</li> 不变 key 属性为了解决以上问题，React提供了一个 key 属性。当子节点带有key属性，React会通过key来匹配原始树和后来的树。 // 旧 <ul> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul> // 新 <ul> <li key="2014">Connecticut</li> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul> 执行过程： 现在 React 知道带有key '2014' 的元素是新的，对于 '2015' 和 '2016' 仅仅移动位置即可
React的基本使用
// 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'))
createElement()的问题
var dv = React.createElement(
"div",{ className: "shopping-list" },React.createElement(
"h1",null,"Shopping List for "
),React.createElement(
"ul",React.createElement(
"li","Instagram"
),"WhatsApp"
)
)
)
// 渲染
ReactDOM.render(dv,document.getElementById('app'))
JSX 的基本使用
注意：JSX的语法需要通过 babel-preset-react 编译后，才能被解析执行 /* 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的注意点
React组件React 组件可以让你把UI分割为独立、可复用的片段，并将每一片段视为相互独立的部分。
React创建组件的两种方式
函数式组件 和 class 组件的使用场景说明： 1 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件 2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state JavaScript函数创建
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创建在es6中class仅仅是一个语法糖，不是真正的类，本质上还是构造函数+原型 实现继承 // ES6中class关键字的简单使用
// - **ES6中的所有的代码都是运行在严格模式中的**
// - 1 它是用来定义类的，是ES6中实现面向对象编程的新方式
// - 2 使用`static`关键字定义静态属性
// - 3 使用`constructor`构造函数，创建实例属性
// - [参考](http://es6.ruanyifeng.com/#docs/class)
// 语法：
class Person {
// 实例的构造函数 constructor
constructor(age){
// 实例属性
this.age = age
}
// 在class中定义方法 此处为实例方法 通过实例打点调用
sayHello () {
console.log('大家好，我今年' + this.age + '了');
}
// 静态方法 通过构造函数打点调用 Person.doudou()
static doudou () {
console.log('我是小明，我新get了一个技能，会暖床');
}
}
// 添加静态属性
Person.staticName = '静态属性'
// 实例化对象
const p = new Person(19)
// 实现继承的方式
class American extends Person {
constructor() {
// 必须调用super(),super表示父类的构造函数
super()
this.skin = 'white'
this.eyeColor = 'white'
}
}
// 创建react对象
// 注意：基于 `ES6` 中的class，需要配合 `babel` 将代码转化为浏览器识别的ES5语法
// 安装：`npm i -D babel-preset-env`
// 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>
)
}
}
给组件传递数据 - 父子组件传递数据
function Welcome(props){
// props ---> { username: 'zs',age: 20 }
return (
<div>
<div>Welcome React</div>
<h3>姓名：{props.username}----年龄是：{props.age}</h3>
</div>
)
}
// 给 Hello组件 传递 props：username 和 age(如果你想要传递numb类型是数据 就需要向下面这样)
ReactDOM.reander(<Hello username="zs" age={20}></Hello>,......)
封装组件到独立的文件中// 创建Hello2.js组件文件
// 1. 引入React模块
// 由于 JSX 编译后会调用 React.createElement 方法，所以在你的 JSX 代码中必须首先拿到React。
import React from 'react'
// 2. 使用function构造函数创建组件
function Hello2(props){
return (
<div>
<div>这是Hello2组件</div>
<h1>这是大大的H1标签，我大，我骄傲！！！</h1>
<h6>这是小小的h6标签，我小，我傲娇！！！</h6>
</div>
)
}
// 3. 导出组件
export default Hello2
// app.js中 使用组件：
import Hello2 from './components/Hello2'
props和stateprops
// props 是一个包含数据的对象参数，不要试图修改 props 参数
// 返回值：react元素
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() {
// es6继承必须用super调用父类的constructor
super()
this.state = {
gender: 'male'
}
}
render() {
return (
<div>性别：{ this.state.gender }</div>
)
}
}
JSX语法转化过程// 1、JSX
const element = (
<h1 className="greeting">
Hello,world!
</h1>
)
// 2、JSX -> createElement
const element = React.createElement(
'h1',{className: 'greeting'},'Hello,world!'
)
// React elements: 使用对象的形式描述页面结构
// Note: 这是简化后的对象结构
const element = {
type: 'h1',props: {
className: 'greeting',},children: ['Hello,world']
}
评论列表案例
[
{ user: '张三',content: '哈哈，沙发' },{ user: '张三2',content: '哈哈，板凳' },{ user: '张三3',content: '哈哈，凉席' },{ user: '张三4',content: '哈哈，砖头' },{ user: '张三5',content: '哈哈，楼下山炮' }
]
// 属性扩展
<Comment {...item} key={i}></Comment>
style样式// 1. 直接写行内样式：
<li style={{border:'1px solid red',fontSize:'12px'}}></li>
// 2. 抽离为对象形式
var styleH3 = {color:'blue'}
var styleObj = {
liStyle:{border:'1px solid red',fontSize:'12px'},h3Style:{color:'green'}
}
<li style={styleObj.liStyle}>
<h3 style={styleObj.h3Style}>评论内容：{props.content}</h3>
</li>
// 3. 使用样式表定义样式：
import '../css/comment.css'
<p className="pUser">评论人：{props.user}</p>
相关文章
组件的生命周期
组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！
组件生命周期函数总览
constructor()
componentWillReceiveProps()
componentWillUnmount() 组件生命周期 - 创建阶段(Mounting)
constructor()
class Greeting extends React.Component {
constructor(props) {
// 获取 props
super(props)
// 初始化 state
this.state = {
count: props.initCount
}
}
}
// 初始化 props
// 语法：通过静态属性 defaultProps 来初始化props
Greeting.defaultProps = {
initCount: 0
};
componentWillMount()
componentWillMount() {
console.warn(document.getElementById('btn')) // null
this.setState({
count: this.state.count + 1
})
}
render()
render() {
console.warn(document.getElementById('btn')) // null
return (
<div>
<button id="btn" onClick={this.handleAdd}>打豆豆一次</button>
{
this.state.count === 4
? null
: <CounterChild initCount={this.state.count}></CounterChild>
}
</div>
)
}
componentDidMount()
componentDidMount() {
// 此时，就可以获取到组件内部的DOM对象
console.warn('componentDidMount',document.getElementById('btn'))
}
组件生命周期 - 运行阶段（Updating）
componentWillReceiveProps()
componentWillReceiveProps(nextProps) {
console.warn('componentWillReceiveProps',nextProps)
}
shouldComponentUpdate()
// - 参数：
// - 第一个参数：最新属性对象
// - 第二个参数：最新状态对象
shouldComponentUpdate(nextProps,nextState) {
console.warn('shouldComponentUpdate',nextProps,nextState)
return nextState.count % 2 === 0
}
componentWillUpdate()
componentWillUpdate(nextProps,nextState) {
console.warn('componentWillUpdate',nextState)
}
render() 渲染
componentDidUpdate()
componentDidUpdate(prevProps,prevState) {
console.warn('componentDidUpdate',prevProps,prevState)
}
组件生命周期 - 卸载阶段（Unmounting）
componentWillUnmount()
React - createClass（不推荐）
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
// 初始化 props
getDefaultProps: function() {
console.log('getDefaultProps');
return {
title: 'Basic counter!!!'
}
},// 初始化 state
getInitialState: function() {
console.log('getInitialState');
return {
count: 0
}
},render: function() {
console.log('render');
return (
<div>
<h1>{this.props.title}</h1>
<div>{this.state.count}</div>
<input type='button' value='+' onClick={this.handleIncrement} />
</div>
);
},handleIncrement: function() {
var newCount = this.state.count + 1;
this.setState({count: newCount});
},propTypes: {
title: React.PropTypes.string
}
});
ReactDOM.render(
React.createElement(Greeting),document.getElementById('app')
);
state和setState
// 修改state（不推荐使用） // https://facebook.github.io/react/docs/state-and-lifecycle.html#do-not-modify-state-directly this.state.test = '这样方式，不会重新渲染组件'; constructor(props) {
super(props)
// 正确姿势！！！
// -------------- 初始化 state --------------
this.state = {
count: props.initCount
}
}
componentWillMount() {
// -------------- 修改 state 的值 --------------
// 方式一：
this.setState({
count: this.state.count + 1
})
this.setState({
count: this.state.count + 1
},function(){
// 由于 setState() 是异步操作，所以，如果想立即获取修改后的state
// 需要在回调函数中获取
// https://doc.react-china.org/docs/react-component.html#setstate
});
// 方式二：
this.setState(function(prevState,props) {
return {
counter: prevState.counter + props.increment
}
})
// 或者 - 注意： => 后面需要带有小括号，因为返回的是一个对象
this.setState((prevState,props) => ({
counter: prevState.counter + props.increment
}))
}
组件绑定事件
React中的事件机制 - 推荐
<input type="button" value="触发单击事件"
onClick={this.handleCountAdd}
onMouseEnter={this.handleMouseEnter}
/>
JS原生方式 - 知道即可
// JSX
// 将当前DOM的引用赋值给 this.txtInput 属性
<input ref={ input => this.txtInput = input } type="button" value="我是豆豆" />
componentDidMount() {
// 通过 this.txtInput 属性获取元素绑定事件
this.txtInput.addEventListener(() => {
this.setState({
count:this.state.count + 1
})
})
}
事件绑定中的this
通过bind绑定
// 自定义方法：
handleBtnClick(arg1,arg2) {
this.setState({
msg: '点击事件修改state的值' + arg1 + arg2
})
}
render() {
return (
<div>
<button onClick={
// 无参数
// this.handleBtnClick.bind(this)
// 有参数
this.handleBtnClick.bind(this,'abc',[1,2])
}>事件中this的处理</button>
<h1>{this.state.msg}</h1>
</div>
)
}
constructor() {
super()
this.handleBtnClick = this.handleBtnClick.bind(this)
}
// render() 方法中：
<button onClick={ this.handleBtnClick }>事件中this的处理</button>
通过箭头函数绑定
<input type="button" value="在构造函数中绑定this并传参" onClick={
() => { this.handleBtnClick('参数1','参数2') }
} />
handleBtnClick(arg1,arg2) {
this.setState({
msg: '在构造函数中绑定this并传参' + arg1 + arg2
});
}
受控组件
在HTML当中，像
// 模拟实现文本框数据的双向绑定
<input type="text" value={this.state.msg} onChange={this.handleTextChange}/>
// 当文本框内容改变的时候，触发这个事件，重新给state赋值
handleTextChange = event => {
console.log(event.target.value)
this.setState({
msg: event.target.value
})
}
评论列表案例[
{name: '小明',content: '沙发！！！'},{name: '小红',content: '小明，居然是你'},{name: '小刚',content: '小明，放学你别走！！！'},]
props校验
// 引入模块
import PropTypes from 'prop-types'
// ...以下代码是类的静态属性：
// propTypes 静态属性的名称是固定的！！！
static propTypes = {
initCount: PropTypes.number,// 规定属性的类型
initAge: PropTypes.number.isRequired // 规定属性的类型，且规定为必传字段
}
React 单向数据流
react中的单向数据流动： 1 数据应该是从上往下流动的，也就是由父组件将数据传递给子组件 2 数据应该是由父组件提供，子组件要使用数据的时候，直接从子组件中获取 在我们的评论列表案例中：数据是由CommentList组件（父组件）提供的 子组件 CommentItem 负责渲染评论列表，数据是由 父组件提供的 子组件 CommentForm 负责获取用户输入的评论内容，最终也是把用户名和评论内容传递给了父组件，由父组件负责处理这些数据（ 把数据交给 CommentItem 由这个组件负责渲染 ） 组件通讯
Context特性
class Grandfather extends React.Component {
// 类型限制（必须），静态属性名称固定
static childContextTypes = {
color: PropTypes.string.isRequired
}
// 传递给孙子组件的数据
getChildContext() {
return {
color: 'red'
}
}
render() {
return (
<Father></Father>
)
}
}
class Child extends React.Component {
// 类型限制，静态属性名字固定
static contextTypes = {
color: PropTypes.string
}
render() {
return (
// 从上下文对象中获取爷爷组件传递过来的数据
<h1 style={{ color: this.context.color }}>爷爷告诉文字是红色的</h1>
)
}
}
class Father extends React.Component {
render() {
return (
<Child></Child>
)
}
}
react-router
基本概念说明
使用步骤
// 1 导入组件
import {
HashRouter as Router,Link,Route
} from 'react-router-dom'
// 2 使用 <Router>
<Router>
// 3 设置 Link
<Menu.Item key="1"><Link to="/">首页</Link></Menu.Item>
<Menu.Item key="2"><Link to="/movie">电影</Link></Menu.Item>
<Menu.Item key="3"><Link to="/about">关于</Link></Menu.Item>
// 4 设置 Route
// exact 表示：绝对匹配（完全匹配，只匹配：/）
<Route exact path="/" component={HomeContainer}></Route>
<Route path="/movie" component={MovieContainer}></Route>
<Route path="/about" component={AboutContainer}></Route>
</Router>
注意点
路由参数
// 配置路由参数 <Route path="/movie/:movieType"></Route> // 获取路由参数 const type = this.props.match.params.movieType 路由跳转
this.props.history.push('/movie/movieDetail/' + movieId)
fetch
fetch 基本使用
/*
通过fetch请求回来的数据，是一个Promise对象.
调用then()方法，通过参数response，获取到响应对象
调用 response.json() 方法，解析服务器响应数据
再次调用then()方法，通过参数data，就获取到数据了
*/
fetch('/api/movie/' + this.state.movieType)
// response.json() 读取response对象，并返回一个被解析为JSON格式的promise对象
.then((response) => response.json())
// 通过 data 获取到数据
.then((data) => {
console.log(data);
this.setState({
movieList: data.subjects,loaing: false
})
})
跨域获取数据的三种常用方式
JSONP
/* movielist.js */
fetchJsonp('https://api.douban.com/v2/movie/in_theaters')
.then(rep => rep.json())
.then(data => { console.log(data) })
代理
// webpack-dev-server的配置
devServer: {
// https://webpack.js.org/configuration/dev-server/#devserver-proxy
// https://github.com/chimurai/http-proxy-middleware#http-proxy-options
// http://www.jianshu.com/p/3bdff821f859
proxy: {
// 使用：/api/movie/in_theaters
// 访问 ‘/api/movie/in_theaters’ ==> 'https://api.douban.com/v2/movie/in_theaters'
'/api': {
// 代理的目标服务器地址
target: 'https://api.douban.com/v2',// https请求需要该设置
secure: false,// 必须设置该项
changeOrigin: true,// '/api/movie/in_theaters' 路径重写为：'/movie/in_theaters'
pathRewrite: {"^/api" : ""}
}
}
}
/* movielist.js */
fetch('/api/movie/in_theaters')
.then(function(data) {
// 将服务器返回的数据转化为 json 格式
return data.json()
})
.then(function(rep) {
// 获取上面格式化后的数据
console.log(rep);
})
CORS - 服务器端配合
// 通过Express的中间件来处理所有请求
app.use('*',function (req,res,next) {
// 设置请求头为允许跨域
res.header('Access-Control-Allow-Origin','*');
// 设置服务器支持的所有头信息字段
res.header('Access-Control-Allow-Headers','Content-Type,Content-Length,Authorization,Accept,X-Requested-With');
// 设置服务器支持的所有跨域请求的方法
res.header('Access-Control-Allow-Methods','POST,GET');
// next()方法表示进入下一个路由
next();
});
redux
核心
/* action */
// 在 redux 中，action 就是一个对象
// action 必须提供一个：type属性，表示当前动作的标识
// 其他的参数：表示这个动作需要用到的一些数据
{ type: 'ADD_TODO',name: '要添加的任务名称' }
// 这个动作表示要切换任务状态
{ type: 'TOGGLE_TODO',id: 1 }
/* reducer */
// 第一个参数：表示状态（数据），我们需要给初始状态设置默认值
// 第二个参数：表示 action 行为
function todo(state = [],action) {
switch(action.type) {
case 'ADD_TODO':
state.push({ id: Math.random(),name: action.name,completed: false })
return state
case 'TOGGLE_TODO':
for(var i = 0; i < state.length; i++) {
if (state[i].id === action.id) {
state[i].completed = !state[i].completed
break
}
}
return state
default:
return state
}
}
// 要执行 ADD_TODO 这个动作：
dispatch( { type: 'ADD_TODO',name: '要添加的任务名称' } )
// 内部会调用 reducer
todo(undefined,{ type: 'ADD_TODO',name: '要添加的任务名称' }) （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |