React初体验

**

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