React 基础
react.development.js 核心js
react-dom.development.js dom渲染js文件 有先后顺序
使用...展开语法:
let arr = [1,2,3,4];
console.log(...arr) // 1,2,3,4
内联样式写法:
<input type="text" name="username" style={{fontSize:'12px'}}>
类式组件:
class MyComponent extens React.Component{
1. render() 方法核心
render(){
return(
// render 只能返回单节点(一个div包裹)
)
}
}
初始化对象状态state
1. 可以在实例对象创建时:
constructor() {this.state = {a:1}}
2. 也可以直接在类中定义:
class Persion {
state = {a: 1}
}
3. 如果需要修改state中的值, 使用 this.setState({a:2})
react对标签属性的限制
需要引入prop-types.js
类外面的写法
1.react 组件类型限制:
类.propTypes={
name: PropTypes.string.isRequire, 限制name为必填string类型
age: PropTypes.number 限制age为数字类型
say: PropTypes.func 限制say为函数类型
}
2.react 指定默认属性
类.defaultProps = {
sex: '男', 设置默认sex为男
age: 17
}
3.类里面的写法 static, 对象静态属性
static propTypes={
name: PropTypes.string.isRequire, 限制name为必填string类型
age: PropTypes.number 限制age为数字类型
say: PropTypes.func 限制say为函数类型
}
函数式组件:
1. 所有的参数都会在props中
2. 函数式组件中 没有state , 没有refs
function MyComponent(props){
return (
<h1>test</h1>
)
}
总结: 组件传参数 可以使用...语法 , 解构赋值 const {a,b} = this.props //
解构赋值连续写法:
const {target: {value}} = this.event // value 就是target.value 写法
render() : 方法会被调用1+n次, 初始化渲染和组件更新才会调用
组件生命周期 (旧版 16):
1.卸载组件:
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
2. 组件挂载完毕
componentDidMount(){ }
3. 组件将要卸载执行
componentWillUnmount(){}
4. 组件将要挂载
componentWillMount(){}
5. 执行setState 会调用这个钩子决策,返回true通过,false 更新取消,默认一直为真
shouldComponentUpdate(){}
6. 组件将要更新
componentWillUpdate(){}
7. 组件更新完毕 (可以接收3个参数, 第三个就是快照值)
componentDidUpdate(){}
8. 强制更新状态, 当执行this.forceUpdate() 只会执行componentWillUpdate() 钩子
9. 当父组件更新时,子组件才会执行(第一次渲染不会执行哦)
componentWillReceiveProps(props){}
组件生命周期 (新版):
1.这个3个钩子如果使用,前面需要加上 UNSAFE_ 前缀, 在未来异步渲染中可能会出bug
componentWillMount
componentWillReceiverProps
componentWillUpdate
2. 新增加两个钩子:
无用: getDerivedStateFormProps(){} // new props setState forceUpdate 执行
getSnapshotBeforeUpdate(){} // 该方法返回快照值,交给 componentDidUpdate 钩子
总结:
常用的 也就是 constructor 实例化 render渲染
componentDidMount挂载完毕 componentWillUnmount
事件处理:
js中: onclick
react: onClick={this.method}, onBlur={},onChange={}
react 调用method方法会传递事件源(event)=> event.target.value 即可获取当前input值
表单提交:
表单提交事件 - 受控组件(通过ref获取元素值):
this.refs.username.value
this.refs.password.value
handleSubmit = event=>{
event.preventDefault() // 阻止默认表单提交
// 不适用表单提交发送请求
}
<form onSubmit={this.handleSubmit}>
<input ref={e=>this.username=e} type="text" name="username">
<input ref={e=>this.password=e} type="text" name="password">
<button>提交</button>
</form>
非受控组件 - 通过onChange 动态获取用户输入,存入state:
changeUsername = e => {
this.setState({username: e.target.value})
}
<input name="username" onchange={this.chanageUsername}>
函数柯里化:
1.在使用非受控组件时,会存在一个问题,就是我有很多个input,会出现很多个对应的方法
2.函数柯里化解决这个问题:
state = {
username: ''
}
saveFormDate = name => {
return e => {
// key : value 方式存入state
this.setState({[name]: e.target.value})
}
}
<input type="text" onChange={this.saveFormDate('username')}> // 调用函数并传递一个name标识
3.不用科里化实现:
state = {
username: ''
}
saveFormDate = (name,e) => {
this.setState({[name]: e.target.value})
}
<input type="text" onChange={(e)=>{this.saveFormDate('username',e)}}> // onChange react 会帮你调用
refs获取元素(2,3 都可以 没有什么影响):
1.字符串方式(将要废弃):
声明: 类似vue: <input ref="input1">
使用: this.refs.input1.value 就可以获取input的值
2.回调方式-内联方式 (render 更新会渲染两次):
render(){
return (<div>ref={(e)=>{this.input1=e}}</div>)
简写方式
return (<div>ref={e=>this.input1=e}</div>)
}
3.优化回调方式,调用类方法:
// 在类中定义方法
saveInput=(e)=>{
this.input1 = e;
}
render(){
return (<div>ref={this.saveInput}</div>)
简写方式
return (<div>ref={e=>this.input1=e}</div>)
}
4.createRef 最新方式:
创建: myRef = React.createRef() // 只能存放一个元素
使用: <input ref={myRef}>
获取input值: this.myRef.current.value
子组件如何给父组件传值:
1. 函数回调的方式
class A extends React.Component{
callback_date = childDate => {
console.log(childDate)
}
render(){
return (
// 当header 中调用callback_parent 会调用父组件方法
<Header callback_parent={this.callback_date}/>
)
}
}
数组方法:
forEach() 循环,遍历
const arr2 = arr.map((v,i,arr)=>{v}) 遍历
filter() 过滤使用
reduce() 统计使用
react 配置代理:
setupProxy.js 新建
const proxy = require('http-proxy-middleware') 使用这个模块
react 脚手架使用:
网络请求:
axios
父子组件通信:
pubsubjs.js
1. 谁用数据谁就订阅消息(先订阅在发布)
路由组件和一般组件有什么不同:
1. 写法不同:
<About />
<Route path="/about" component={About}></Route>
2. 存位置不同:
pages/ components/
3. 接收参数不同:
路由组件接收到的props:
history:
go
goBack
goForward
push
replace
location:
pathname: "/about"
search: ''
state:
match:
parms: {}
path: '/about'
url: '/about'
react 如何使用路由:
1. 引入 react-router-dom.js
2. 引入组件库 import {Link, BrowserRouter,Route} from 'router-router-dom'
路由类型: 全局唯一必须把Link 和 Route包起来 应该放在最外侧
<BrowserRouter>
<App/>
</BrowserRouter>
路由分类: BrowserRouter: 非锚点路由 /a/ba/c, HashRouter锚点路由 /home#/aaa #号后面不会发送到服务端
Route 注册路由(坐映射关联)
Link 路由链接实现组件切换, 必须在外侧包裹哪一种路由类型:
<BrowserRouter>
<Link to="/about">点击我去about组件</Link>
<Link to="/home">点击我去home组件</Link>
3.注册路由(link 对应的) exact={true} 精准匹配(默认是模糊匹配路由,不能随便开启,开启会导致2级路由失效)
<Route path="/about" exact={true} component={About}></Route>
<Route path="/home" component={Home}></Route>
</BrowserRouter>
4. 提高路由匹配效率:
<Switch/> 效率比较高, 匹配到路由会直接返回,不会继续匹配
5. 如何实现路由点击高亮效果:
使用Link升级版:
<NavLink to="/about" activeClassName={xxx}>点击我去about组件</NavLink>
***标签体内容是一个特殊的属性. this.props.children 可以获取标签体内容
4.1 点击默认追加action class, 也可以使用actionClassName 指定样式
6. 默认选中:
<Redirect to='/about'/>
1. 一般写在最下方,没有匹配到路由的情况下跳转到redirect指定的路由
路由组件传值几种方式:
1.第一种params: 直接在路由后面拼接:
<Link to="/about/1">点击我去about组件</Link>
声明接收一个变量id (可以拼接多个/:id/:title),About组件props中查看 , this.props.match.params
<Route path="/about/:id" component={About}></Route>
2. 第二种search:
<Link to="/about/?id=1&title=aaa">点击我去about组件</Link>
无需声明接收,直接在About 中props接收, this.props.location.search // ?id=1&title=aaa 需要自己处理
***可以借助querystring 库处理
<Route path="/about" component={About}></Route>
3. ***state 方式, 不是组件的state,不能按照之前的方式,, 地址栏不会显示参数
<Link to={{pathname:'/about', state:{id:1,title:'xxx'}}}>点击我去about组件</Link>
无需声明接收,直接在About 中props接收, this.props.location.state // 无需处理,比较爽
编程式导航(只有路由组件才有history):
通过点击事件函数跳转,this.porps.history.push/this.porps.history.replace
this.porps.history.push('/about')
this.porps.history.replace('/about') 跳转不留痕迹
this.porps.history.goBack()
this.porps.history.goForward()
使用withRouter ,让一般组件有路由组件的API,解决一般组件使用history问题
import {withRouter} from 'react-router-dom'
class Header extends Component{}
export default withRouter(Header)
