**
1
**
1)react是用于构建用户界面的javascript库,于2013年5月份推出(facebook)由社区维护
2)特点:声明式
组件化
一次学习,随处编写(react ReactNative)
3)开发环境的搭建
引用文件的方式 脚手架环境的方式
首先初始化环境npm init -y
安装react包npm i react
安装react-dom核心包npm i react-dom
安装babel包npm i standalone
然后将babel.js react.development.js react-dom.development.js 放到js的文件夹下
引入时要按照react.development.js
react-dom.development.js
babel.js
这个顺序进行引入
4)注意:script的type属性指定为text/babel
5)babel的作用
解析jsx
es6转换为es5
6)jsx是一种语法糖 是javascript扩展的意思
相当于js+xml
jsx不是必须的,但是使用jsx能够提高开发发效率
jsx的原理是(语法行)React.createElement(“标签名”,{属性:属性值},“内容”)
7)jsx渲染变量 差值表达式是一个{}
8)注意:
a:对象不能直接渲染,但是对象的值能够一个个渲染,数组以字符串的形式进行渲染
b:在jsx中class要改成classNmae
c :事件的首字母要大写比如点击事件(onClick)这个形式
d:差值表达式中不能写if,for等语句
9)react当中遍历列表时要指定key值,可以用map的方法进行映射
10)遍历列表的时候注意标签的语义化
11)return后面要有字符
12)react的特点:简介 灵活
13)无状态组件
conts 组件的名字=(props)=>{return jsx表达式}
14)类组件
class 组件的名字 extends React.Component{render{(//this 常用属性 state props refs) return jsx表达式}}
state 是组件内部的数据
props 是来自组件外部的数据
refs 标识一个组件的节点
15)遍历对象的关键,把对象的key值变为一个数组
Object.keys(obj)
**
2
**
1)事件绑定处理函数,要进行传参数(或者用箭头函数)
this.方法名字.bind(this.参数)
事件处理函数的最后一个参数是对象
2)对象的浅拷贝
…(扩展运算符) var obj = {…obj2}
object.assign var obj = object.assign
3)setState
a)异步
b)连续执行对象会合并,结果是最后一个执行的结果this.setState({key:value},callback)
c)this.setState((prevState,props)=>{
return {
key:value
}},callback)
连续执行多次获放入队列中一次执行
4)组件挂载阶段,会自定执行的钩子
constructor----render----componentDidMount
执行的顺序按上面的顺序执行
其中componentDidMount钩子函数在执行后可以进行DOM操作,还可用于检测数据的变化
5)受控组件与非受控组件
表单元素它的值来自于state这个组件就是受控组件,否则就是非受控组件
普通组件来说,它的数据都来自与外部(props)这个组件就是受控组件
6)state 状态
constructor(props){
super(props);–>使this.props有值
this.state={
key:value
}
}
更改state的值不能值计入更改,直接改视图会不同步,改要用setState
**
3
**
1)字符串用includes方法判断是否存在子串
“arr”.include(“a”)
2)dangerouslySetInnerHTML
<div ~={_html:{字符串}}>
3)脚手架
npm i create-react-app -g (全局安装)
create-react-app --version或者create-react-app -V (查看版本)
creat-react-app 项目名称 (创建一个新的项目)
进到创建的项目里打开cmd用npm start启动项目
src/index.js是入口文件
4)导入导出
export xxx 导出
import {xxx} from path 导入
import * as 名字 from path 全部导入
5)引入图片
import 变量 from “图片路径”
或者
6)jsx规则
value —>defaulValue
checked —>defaulChecked
onXxx---->事件绑定
for —>htmlFor (锚点)
style写对象 style={{}}
class —>classNmae
{/注释的内容/}
7)ref 标识节点
a: ref=“字符串”
b: ref={(node)=>this.属性=node}
c: createRef
this.state={
变量: createRef()
}
this.state.变量.current 就可以引用这个节点了
8)组件的传值
父传子:通过属性传递
子传父:调用父组件传递过去的方法来实现传递的数据放到参数里
9)mock 数据工具
npm i json-server -g
json-server --version查看版本号
json-server xxx.json --port 端口号 (开放端口号)
json-server 模糊查找有两种形式
全局
url?q=查找的关键字
以某一个字段模糊查找
url?字段_like=查找的关键字
快捷键
rcc—>类组件
rfc—>无状态组件
补充:Xxx.vue 靠vue-loader 解析
react 组件 靠babel 解析
**
4
**
1)jsx或js都可以是react组件的扩展名
2)代理
正向代理–>开发环境
反向代理–>上线环境
配置文件的路径
目目录下/node_modules/react- scripts/config/webpackDevServer.config.js
proxy:{
“/weather”:{
target:“http://www.weather.com.cn”,
changeOrigin:true,
“pathRewrite”:{
“^/weather”:"/"
}
}
},
3)cnpm 安装依赖时容易丢包
4)弹射 eject
yarn eject 或者 npm run eject
弹射操作不能撤销,弹射出错后重装依赖
5)生命周期的钩子函数
a:挂载阶段的钩子函数
constructor(props):应当做些初始化的动作,如:初始化state
,将事件处理函数绑定到类实例上
Static getDerivedStateFromProps(props,state)—>(更新):在组件实例化后,和接受新的props
后被调用。他必须返回一个对象来更新状态, 或者返回null表示新的props不需要任何state的更新。 如果是由于父组件的props
更改,所带来的重新渲染,也会触发此方法。
render():render()方法是必需的。当他被调用时,他将计算this.props
和this.state
,并返回以下一种类型: 1. React元素。通过jsx创建,既可以是dom元素,也可以是用户自定义的组件。 2. 字符串或数字。他们将会以文本节点形式渲染到dom中。 3. null,什么也不渲染 4. 布尔值。也是什么都不渲染。
componentDidMount():组件被装配后立即调用。初始化使得DOM节点应该进行到这里。通常在这里进行ajax请求,如果要初始化第三方的dom库,也在这里进行初始化。 只有到这里才能获取到真实的dom.
挂载阶段的执行顺序就是按照上面的顺序执行
b:卸载阶段的钩子函数
componentWillMount() 卸载阶段的钩子函数只有一个 组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理, 例如使定时器无效, 取消网络请求或 清理在componentDidMount
中创建的任何监听。
c:更新阶段的钩子函数
shouldComponentUpdate(nextprops,nextstate):默认为true(会渲染)如果shouldComponentUpdate()
返回false
,componentWillUpdate
,render
和componentDidUpdate
不会被调用。可以加条件减少不必要的渲染增加性能
getSnapshotBeforeUpdate(prevprops,prevstate):在react render()
后的输出被渲染到DOM之前被调用。它使您的组件能够在它们被潜在更改之前捕获当前值(如滚动位置)。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate(),必须和componentDidUpdate()一起调用,不能和旧版的钩子函数使用,必须返回一个值,目的是为了返回数据更新前的dom状态。
static getDerivedStateFromProps(props, state)
componentDidUpdate(prevProps, prevState, snapshot)
render()
补充:
a:静态方法不能用this,调用的就是 类.静态方法名
b:pureComponenr 进行浅比对(对象的第一层) 进行性能优化(纯组件)
对无状态组件 react.memo(组件)
**
5
**
1)我们把参数组件,返回值也是组件,这类我们叫做“高阶组件”其本质是高阶函数(HOC)(map,filter,forEach)
2)脚手架自带的服务器是 weback-dev-server
3)Fagment 空标记 相当于<></>
4)设置默认值
类组件
static defaultProps = {
key:默认值
}
无状态组件
组件名.defaultProps ={
key:默认值
}
5)限定类型
import PropTypes from ‘prop-types’;
类组件
static propTypes={
key:PropTypes.类型
}
无状态组件
组件名.propTypes={
key:PropTypes.类型.isRequired(必须传)
}
6)constructor render componentDidMount componentWillUnmount
componentDidUpdate 监控组件里的数据的变化 慎用setState