react学习过程1

1
一. 环境的搭建
++npm init -y //生成package.json文件
++npm i react --save / yarn add react
++npm i react-dom --save / yarn add react-dom
++npm i babel-standalone --save
安装好以后分别引入
++react.development.js
++react-dom.development.js
++babel.js
注:1.引入的顺序必出正确
2.script标签必须加上type属性 type=”text/babel”
3.引入的文件是umd下面的文件
二.jsx
1.原理:
++jsx是个根据react.createElement来实现的
2.如何使用react.createElement来创建标签
var mydiv=React.createElement(‘div’,{title:‘这是一个div’,id:‘box’},‘哈哈我真帅’,h1)
++第一个参数 指是想要创建的元素 例如div…
++第二个参数 是指创建元素的属性 例如titlt id class… 如果没有属性使用null来代替
++第三个参数 是指想要渲染的页面的文字
3.如何使用jsx注释
{/注释/}
三.插值表达式
所有的js代码需要卸载{}里面
四jsx中关键字的问题
value 改为defaultValue
checked 改为 defaultChecked
for 改为htmlFor
style 写对象
class 改为className
五.事件
语法:onClick //首字母要大写

2
一.无状态组件
var app=()=>{}
二.class组件
class App extends React.Component{ }
class组件里有三个属性
state ref props
三.通过事件传值
onClick={this.change.bind(this,1)}
四.Ref
方法一

this.refs.change.值 方法二 官方推荐 this.values=value}/> this.values.value 五.State constructor(props){ super(props); this.state={ list:[], n:"我很优雅" } } 注:state的值只能通过this.setState({})来改变 setState为异步执行 六.受控组件和非受控组件 表单元素它的值来自于state 这个组件就是受控组件，否则就是非受控组件 普通组件来说，它的数据都来自于外部（props) 这个组件就是受控组件

3
一.组件的传值
1.父传子
++通过属性来传值
例: //传递
this.props.list //接收
2.子传父
++调用父组件传递过来的方法来实现的。传递的数据放到参数里去
例: this.props.方法名(所需传递的数据) //传递
//绑定点击事件
add=(num)=>{} //num为接收过来的值
二.模拟mock工具(json-server)
++ npm i json-server -g //安装json-server
++ json-server --version //查看安装的版本也是查看是否安装成功
使用:
1.创建一个json文件
2.运行:
++json-server xxx.json --port 端口 -w
Port //设置打开的端口号
-w //自动运行 类似于nodemon
++ json-server 的使用说明
https://gitee.com/rh_hg/json-server?_from=gitee_search

4
1.代理
++正向代理:
配置文件的路径
项目目录下/node_modules/react-scripts/config/webpackDevServer.config.js
proxy:{
“/weather”:{
target:“http://www.weather.com.cn”,
changeOrigin:true,
“pathRewrite”:{
“^/weather”:"/"
}
}
},
找到配置文件 在proxy后添加以上代码
注:请求时需要将请求接口路径也改变啦
2.弹射
++ yarn eject 不能撤销
如果弹射后出错，重装依赖即可完成弹射
也可以使用
npm run eject来进行安装
3.生命周期钩子函数
1.挂载阶段四个


a.constructor(props,context)
b. getDerivedStateFromProps(props,state)
c.render
d.componentDidMount
2.销毁阶段
componentWillUnmount
3.更新阶段
static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState)
render()
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate(prevProps, prevState, snapshot)

5
json-server

6

脚手架安装
npm i create-react-app -D //安装
create-react-app --version //显示安装的版本号
create-react-app 文件名 //创建脚手架
npm satrt //运行