react中的类组件与函数组件
⼀、类组件中的ref绑定⽅式
1. 类组件中初始化状态在constructor中定义
2. 在事件函数中this需要写成箭头函数
3. react是v层框架，数据改变，视图不发⽣改变
4. 如果更改状态，并且让视图进⾏重新render的话需要调⽤setState⽅法
5. setState⽅法是异步的不会阻塞后续代码
6. setState⽅法的第⼆个参数的回调函数可以获取到最新的状态
7. setState⽅法中参数prevState参数代表上⼀次的状态
（1）componentDidMount：相当于vue中的mounted钩⼦函数当render渲染完页⾯以后 可以再函数中操作真实DOM
1、constructor：初始化时执⾏，需在第⼀⾏添加super()
react组件之间通信
super()：作⽤继承的时候，⼦类constructor⾥⾯第⼀⾏代码必须写super关键字，⽬的调⽤⽗类的空构造函数来去实例化⼦类本⾝（2）通过ref=""这种⽅式来去给dom元素进⾏标记（不建议使⽤）
componentDidMount(){
console.log("componentDidMount",this)
}
render(){
console.log("")
return(
<div>
<input ref="textInput"/>
</div>
)
}
（3）ref绑定callback（回调函数⽅式）
1. 这⾥⾯的this代表实例整体，Input给实例中添加textInput添加el与实例关联
componentDidMount(){
}
render(){
return(
<div>
<input ref={(el)=>{Input = el}}/>
</div>
)
}
（4）creteRef⽅式绑定
1. 通过constructor：创建⼀个ref的引⽤，并且可以通过Ref属性去访问（ateRef()通过这个创建）
2. 需要在组件或者dom元素上通过ref进⾏标记
3. 在获取标记属性时⽤通过current属性惊醒访问
constructor(){
super()
}
componentDidMount(){
console.log(this)
}
render(){
return(
<div>
{/*2.需要在组件或者dom元素上⾯通过ref进⾏标记*/}
<input ref={Ref}/>
</div>
)
}
⼆、函数式组件ref绑定
1. 函数式组件内部不能访问this
2. 函数式组件中没有⽣命周期钩⼦函数，性能⾼
3. 如何在函数式组件中定义ref? react16.8之后推出了⼀系列的Hooks！（useRef）
4. Hooks可以让你在不编写class的情况下使⽤state以及其他的React特性
//1.创建⼀个ref的引⽤对象
//2.通过ref属性绑定dom元素
//`current` 指向已挂载到 DOM 上的⽂本输⼊元素
const textInput = React.useRef(null)
const ssss=()=>{
/
/ console.log("1111")
textInput.current.focus()
}
return(
<div>
<input ref={textInput}/>
<button onClick={ssss}>点击我获取焦点</button>
</div>
)
useRef：返回⼀个可变的ref对象，其current被初始化为传⼊的参数。返回的ref对象在组件的整个⽣命周期内保持不变三、函数式组件更改状态的⽅法
1. const [count,setCount] = React.useState(0)；第⼀个参数状态，第⼆个参数更改状态的⽅法
2. 通过 16.8 useState返回的是⼀个数组，进⾏解构，第⼀个参数是初始化状态，第⼆个参数是更改此状态的⽅法！
const Counter= props=>{
const[count,setCount]= React.useState(0);
const[title,setTitle]= React.useState("hello word");
return(
<div>
获取Counter的状态---{count}---{title}
<button onClick={()=>{setCount(count+1)}}>更改数字</button>
<button onClick={()=>{setTitle("你好")}}>更改</button>
</div>
)
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。