【React 三】组件实例的三大属性（state、props、refs）

最新推荐文章于 2023-08-08 13:46:45 发布

AI画手小王

最新推荐文章于 2023-08-08 13:46:45 发布

阅读量199

点赞数

文章标签： react.js javascript 前端

原文链接：https://blog.csdn.net/yzq0820/article/details/126714182

版权

一、 State

1.概念

概念：state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)，组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)，有state称为复杂组件。

2.State的简单用法

实现简单的切换效果，这里的效果是一种覆盖

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> .btn{width: 100px;height: 40px;background-color: red;}.on{background-color: gray;} </style>
</head>
<body><div id="root"></div><!-- 引入react核心库 -->
	<script src="js/react.development.js"></script>
	<!-- 引入操作dom的扩展库 -->
	<script src="js/react-dom.development.js"></script>
	<!-- 引入babel来解析jsx语法 -->
	<script src="js/babel.min.js"></script><script type="text/babel"> class IsLike extends React.Component {state = { flag:true }  //箭头函数this指向上下文，静态不可改变changeFlag=()=>{this.setState({flag:!this.state.flag})}render() { const {flag}=this.statereturn (<div><button className={flag?'btn':'btn on'} onClick={this.changeFlag}>{flag?'喜欢':'不喜欢'}</button></div>)}}ReactDOM.render(<IsLike/>,document.getElementById('root')) </script>
</body>
</html>

<img src=“https://juejin.cn/ “点击并拖拽以移动”” style=“margin: auto” />编辑

JS绑定事件

let btn = document.getElementById('btn');

btn.addEventListener('click',function(){

   alert('按钮被点击了!');

})
btn.onclick = function(){

 alert('按钮被点击了!');
}

function demo(){

alert('按钮被点击了');

}

4.react 绑定事件

render(){

return <a href='javascript:;' onClick={demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>

}

说明：

·onclick 变为 onClick。

·{函数名}返回值给click，加()就会直接调用。

5.react this指向问题

demo(){      console.log(this);//undefined

console.log('事件被点击了');

}

举例说明：

class Person{
     constructor(name,age) {
                 this.name = name;
 this.age = age;
     }
say(){
 console.log(this);
 }
 }

const p1 = new Person('张三',18);
p1.say();//p1为实例对象
const p2 = p1.say;
p2();//undefined 类采取是严格模式

6.修改state值

class MyClass extends React.Component{

constructor(props) {   
   super(props);
   this.state = {isflag:true};
   this.demo = this.demo.bind(this);
}render(){

return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>
}

demo(){

    this.setState({isflag:!this.state.isflag})

}}
 ReactDOM.render(<MyClass/>,document.getElementById('root'));

说明：

bind会生成一个新的方法并传对象改变this的指向必须使用setState 修改才有效，修改内容为合并。有值得修改没有的不动

7.代码简写

class MyClass extends React.Component{
state = {isflag:true}
render(){

return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>

}
 demo = () => {
    this.setState({isflag:!this.state.isflag})
 }

}

ReactDOM.render(<MyClass/>,document.getElementById('root'));

说明：

类中的属性直接赋值，省去构造函数。

自定义方法—用赋值语句的形式+箭头函数

二、props

1.概念

每个组件对象都会有props(properties的简写)属性。

组件标签的所有属性都保存在props中。

props 是不可变的，只能通过 props 来传递数据。

2.传参的基础方法、运算符传参

其中先通过let创建了一个对象，在通过三点运算符，来遍历得到，对象里面的值

在通过对象结构得到props中的realname和age,GetName是Person组件的子组件，在Person中传值给GetName,GetName通过props接收

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="root"></div><!-- 引入react核心库 -->
	<script src="js/react.development.js"></script>
	<!-- 引入操作dom的扩展库 -->
	<script src="js/react-dom.development.js"></script>
	<!-- 引入babel来解析jsx语法 -->
	<script src="js/babel.min.js"></script><script type="text/babel"> class GetName extends React.Component {render() { return (<div>姓名：{this.props.realname}</div>);}} class Person extends React.Component {render() { const {realname,age} = this.propsreturn (<div><GetName realname={this.props.realname}/><span>年龄：{age}</span></div>);}}let p1 = {realname:'张三',age:19}ReactDOM.render(<Person {...p1}/>,document.getElementById('root')) </script>

</body>
</html>

三、refs

定义

组件内的标签可以定义ref来标识自己。

字符串形式的ref、回调函数下ref、createRef 创建ref容器

字符串形势，是直接通过ref绑定值，通过在点击事件中获取ref的值，ref如同把整个input表单传了过来，在获取值的时候需要点一下value来获取的是input表单的内容

通过ref中的箭头函数，绑定了值，在方法中直接获取即可，穿过来时，由于react的编译不需要写target但是，还是需要点出value

通过createRef来创建两个容器，通过对象的形势与ref绑定，直接就可以在方法中得到值，不过这里要注意，打印还是获取的时候在点value之前点一个current,如this.realname.current.value

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="root"></div><!-- 引入react核心库 -->
	<script src="js/react.development.js"></script>
	<!-- 引入操作dom的扩展库 -->
	<script src="js/react-dom.development.js"></script>
	<!-- 引入babel来解析jsx语法 -->
	<script src="js/babel.min.js"></script><script type="text/babel"> class Person extends React.Component {//createRef 创建ref容器realname = React.createRef()age= React.createRef()ShowInfo=()=>{//字符串// const {realname,age}=this.refs// console.log(`姓名：${realname.value}年龄：${age.value}`); //回调函数// let realname = this.realname.value// let age= this.age.value// console.log(`姓名：${realname}年龄：${age}`);//类绑定console.log(this.realname.current.value);console.log(this.age.current.value);}render() { return (/*字符串形势<div><p><input type="text" placeholder="请输入姓名" ref='realname'/></p><p><input type="text" placeholder="年龄" ref='age'/></p><p><button onClick={this.ShowInfo}>提交</button></p></div>*///回调函数// <div>//<p><input type="text" placeholder="请输入姓名" ref={e=>this.realname=e}/></p>//<p><input type="text" placeholder="年龄" ref={e=>this.age=e}/></p>//<p><button onClick={this.ShowInfo}>提交</button></p>// </div>//createRef 创建ref容器<div> <p><input type="text" placeholder="请输入姓名" ref={this.realname}/></p> <p><input type="text" placeholder="年龄" ref={this.age}/></p> <p><button onClick={this.ShowInfo}>提交</button></p></div>);}}ReactDOM.render(<Person/>,document.getElementById('root')) </script>
</body>
</html>

s.age}/>

提交

);}}ReactDOM.render(,document.getElementById(‘root’)) ```

最后，最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。