电子商务网站策划书,网站建设及维护保密协议,南宁网站建设 超薄网络,ppt素材网站建设流程图搭建环境
默认你已经安装好 node.js
安装 react 脚手架
学习的过程中#xff0c;我们采用React官方出的脚手架工具 create-react-app
npm install -g create-react-app如果提示没有权限#xff0c;win 用户可以管理员打开终端#xff0c;mac 用户 可以在前面加上 sudo
…搭建环境
默认你已经安装好 node.js
安装 react 脚手架
学习的过程中我们采用React官方出的脚手架工具 create-react-app
npm install -g create-react-app如果提示没有权限win 用户可以管理员打开终端mac 用户 可以在前面加上 sudo
新建第一个项目
在指定文件下
create-react-app study-demo 运行
cd study-demo
npm start脚手架生成的项目目录介绍
README.md :这个文件主要作用就是对项目的说明。package.json: 这个文件是webpack配置和项目包管理文件。package-lock.json这个文件用一句话来解释就是锁定安装时的版本号并且需要上传到git以保证其他人再npm install 时大家的依赖能保证一致。gitignore : 这个是git的选择性上传的配置文件。node_modules :这个文件夹就是我们项目的依赖包。public 公共文件里边有公用模板和图标等一些东西。src 主要代码编写文件 index.js : 这个就是项目的入口文件index.css 这个是index.js里的CSS文件app.js : 这个文件相当于一个方法模块也是一个简单的模块化编程serviceWorker.js: 这个是用于写移动端开发的PWA必须用到这个文件有了这个文件就相当于有了离线浏览的功能
组件的基础编写
修改App.js 文件
import React, {Component} from reactclass App extends Component{render(){return (div classNamecontentHello React/div)}
}
export default App;
这里的 class 是面向对象语言的用法
className 是React 为了区别于 class 的特殊处理
React中JSX语法基础
JSX 就是 Javascript和XML结合的一种格式。
React发明了JSX可以方便的利用HTML语法来创建虚拟DOM
当遇到JSX就当作HTML解析
遇到{就当JavaScript解析
比如我们写一段JSX语法
ul classNamemy-listliHello React/liliI love React/li
/ul相当于
var child1 React.createElement(li, null, Hello React);
var child2 React.createElement(li, null, I love React);
var root React.createElement(ul, { className: my-list }, child1, child2);组件和普通JSX语法区别
自定义的组件必须首写字母要进行大写而JSX是小写字母开头
JSX中使用三元运算符
ul classNamemy-listliHellow {false?React:Word}/liliI love React/li
/ulJSX中使用循环
jsx 可以自动展开数组
ul{this.state.list.map((item,index){return li{item}/li})}
/ul Fragment 标签
因为组件只能有一个根目录
空标签不会在页面留下痕迹
相当于 vue的 template , 小程序的 block
响应式设计和数据绑定
React 不建议你直接操作 DOM 元素,而是要通过数据进行驱动改变界面中的效果
数据定义在组件中的构造函数里constructor
constructor(props){super(props) //调用父类的构造函数固定写法this.state{inputValue: , // input中的值list:[] //列表}
}绑定数据
input value{this.state.inputValue} / 绑定事件
在render()方法的下面建立一个inputChange()方法
inputChange(e){console.log(e.target.value);this.setState({inputValue:e.target.value})
}将事件绑定
input value{this.state.inputValue} onChange{this.inputChange.bind(this)} / 1. 必须要用 bind 设置一下指向(ES6的语法)
2. 改变值需要使用 this.setState 方法
点击事件
divinput value{this.state.inputValue} onChange{this.inputChange.bind(this)} /button onClick{addList} 增加 /button
/div
addList(){this.setState({list:[...this.state.list,this.state.inputValue]})}注意点
1. JSX 的点击事件写法是 onClick
1. React是禁止直接操作 state 的 比如pushsplice 都是不建议使用JSX 代码注释
Fragment{/* 第一种写法写法 */}{// 第二种写法此写法只能单独写一行}
/ FragmentJSX 解析HTML
可以使用 dangerouslySetInnerHTML 属性解决
div dangerouslySetInnerHTML{{__html: this.state.htmlValue}}组件
父组件向子组件传值
父组件
import React,{Component,Fragment } from react
import Item from ./Itemclass Test extends Component{constructor(props){super(props)this.state{list:[1, 2] }}render() {return (Pragmentul{this.state.list.map((item,index){return (Item key{index} content{item} /)})}/ul / Pragment)}
}export default Test子组件
import React, { Component } from react;
class Item extends Component { render() { return ( div{this.props.content}/div);}
}
export default Item;子组件向父组件传递数据
React有明确规定子组件不能操作父组件里的数据所以需要借助一个父组件的方法来修改父组件的内容
import React,{Component,Fragment } from react
import Item from ./Itemclass Test extends Component{constructor(props){super(props)this.handleClickthis.handleClick.bind(this)this.state{list:[1, 2] }}handleClick(key){const arr this.state.list.filter(item item !key)this.setState({list: arr})}render() {return (Pragmentul{this.state.list.map((item,index){return (Item key{index} content{item} handleDel{handleClick} /)})}/ul / Pragment)}
}export default Test子组件
import React, { Component } from react;
class Item extends Component { handleClick(key){this.props.handleDel(key)}render() { return ( div onClick{() handleClick(this.props.content).bind(this)}{this.props.content}/div);}
}
export default Item;prop-types 校验传递的值
在vue中我们 props: {xxx: { type: xxx, isRequire: true, default: xxx }} 可以校验传递的值
在 react 中 我们可以用 prop-types
import React, { Component } from react;
import PropTypes from prop-typesclass Item extends Component { handleClick(key){this.props.handleDel(key)}render() { return ( div onClick{() handleClick(this.props.content).bind(this)}{this.props.content}/div);}
}Item.PropTypes {content: PropTypes.string,handleDel: PropTypes.func
}export default Item;isRequired关键字了,它表示必须进行传递如果不传递就报错
Item.PropTypes {content: PropTypes.string.isRequired,handleDel: PropTypes.func.isRequired
}设置默认值
Item.defaultProps {content: 默认的值
}Ref 的使用
跟vue一样定义了ref就能拿到该元素的大部分信息
定义
input classNameinput value{this.state.inputValue} onChange{this.inputChange.bind(this)}ref{(inputRef){this.inputRefinputRef}}
/使用
inputChange(){this.setState({inputValue:this.inputRef.value})
}React 生命周期
React生命周期分为四个大阶段
Initialization初始化
Mounting挂载
Updation更新
Unmounting销毁
注意点
constructor 不是生命周期函数虽然它和生命周期函数的性质一样
Initialization
定义属性props和状态(state)
Mounting
componentWillMount : 在组件即将被挂载到页面的时刻执行。render : 页面state或props发生变化时执行。componentDidMount : 组件挂载完成时被执行。
注意点
componentWillMount 和 componentDidMount 这两个生命周期函数只在页面刷新时执行一次而render函数是只要有state和props变化就会执行
Updation
shouldComponentUpdate 函数会在组件更新之前自动被执行。它要求返回一个布尔类型的结果必须有返回值常用于组件性能优化。componentWillUpdate 在组件更新之前但 shouldComponenUpdate 之后被执行。componentDidUpdate 在组件更新之后执行它是组件更新的最后一个环节componentWillReceiveProps 子组件接收到父组件传递过来的参数父组件render函数重新被执行这个生命周期就会被执行
注意点
如果shouldComponentUpdate 返回false后面的函数就不会被执行了。
componentWillReceiveProps 组件接收到父组件传递过来的参数父组件render函数重新被执行这个生命周期就会被执行
Unmounting
componentWillUnmount 函数时组件从页面中删除的时候执行
利用shouldComponentUpdate 优化组件
在上面的代码中我们输入框频繁输入会导致子组件频繁刷新导致性能损耗
用 shouldComponentUpdate 函数就可以简单的解决调这个问题
shouldComponentUpdate(nextProps,nextState){if(nextProps.content ! this.props.content){return true}else{return false}
}
