React 学习
React 基础
react.development.js 核心js
react-dom.development.js dom渲染js文件 有先后顺序
使用...展开语法:
let arr = [1,2,3,4];
console.log(...arr) // 1,2,3,4
内联样式写法:
类式组件:
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 (
test
)
}
总结: 组件传参数 可以使用...语法 , 解构赋值 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() // 阻止默认表单提交
// 不适用表单提交发送请求
}
非受控组件 - 通过onChange 动态获取用户输入,存入state:
changeUsername = e => {
this.setState({username: e.target.value})
}
函数柯里化:
1.在使用非受控组件时,会存在一个问题,就是我有很多个input,会出现很多个对应的方法
2.函数柯里化解决这个问题:
state = {
username: ''
}
saveFormDate = name => {
return e => {
// key : value 方式存入state
this.setState({[name]: e.target.value})
}
}
// 调用函数并传递一个name标识
3.不用科里化实现:
state = {
username: ''
}
saveFormDate = (name,e) => {
this.setState({[name]: e.target.value})
}
{this.saveFormDate('username',e)}}> // onChange react 会帮你调用
refs获取元素(2,3 都可以 没有什么影响):
1.字符串方式(将要废弃):
声明: 类似vue:
使用: this.refs.input1.value 就可以获取input的值
2.回调方式-内联方式 (render 更新会渲染两次):
render(){
return (ref={(e)=>{this.input1=e}}
)
简写方式
return (ref={e=>this.input1=e}
)
}
3.优化回调方式,调用类方法:
// 在类中定义方法
saveInput=(e)=>{
this.input1 = e;
}
render(){
return (ref={this.saveInput}
)
简写方式
return (ref={e=>this.input1=e}
)
}
4.createRef 最新方式:
创建: myRef = React.createRef() // 只能存放一个元素
使用:
获取input值: this.myRef.current.value
子组件如何给父组件传值:
1. 函数回调的方式
class A extends React.Component{
callback_date = childDate => {
console.log(childDate)
}
render(){
return (
// 当header 中调用callback_parent 会调用父组件方法