猿创征文|【React 三】组件实例的三大属性(state、props、refs)

简介: 本章带你了解组件实例的三大属性。

目录


一、 State


1.概念


2.State的简单用法3. JS绑定事件 4.react 绑定事件


5.react this指向问题


6.修改state值


7.代码简写


二、props


1.概念


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


三、refs


定义


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


一、 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.state
                return (
                    <div>
                        <button className={flag?'btn':'btn on'} onClick={this.changeFlag}>{flag?'喜欢':'不喜欢'}</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<IsLike/>,document.getElementById('root'))
    </script>
</body>
</html>


微信图片_20220927210734.gif


3. 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.props
                return (
                    <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>


相关文章
|
10天前
|
移动开发 前端开发 JavaScript
React 视频播放控制组件 Video Controls
本文介绍了如何使用 React 构建视频播放控制组件(Video Controls),涵盖基本概念、创建步骤和常见问题解决。首先,通过 HTML5 `&lt;video&gt;` 标签和 React 组件化思想,实现播放/暂停按钮和进度条等基础功能。接着,详细讲解了初始化项目、构建 `VideoControls` 组件及与主应用的集成方法。最后,针对视频无法播放、控制器状态不同步、进度条卡顿和音量控制失效等问题提供了具体解决方案,并介绍了全屏播放和自定义样式等进阶功能。希望这些内容能帮助你在实际项目中更好地实现和优化视频播放功能。
81 40
|
5天前
|
移动开发 前端开发 UED
React 音频预览组件:Audio Preview
本文介绍如何使用 React 构建音频预览组件,涵盖基础实现、常见问题及解决方案。通过 HTML5 `&lt;audio&gt;` 标签和 React 状态管理,实现播放控制。解决文件路径、浏览器兼容性等问题,并优化性能,避免状态不同步和内存泄漏,提升用户体验。
53 22
|
7天前
|
移动开发 前端开发 UED
React 音频播放器组件 Audio Player
本文介绍如何使用React创建功能丰富的音频播放器组件。基于HTML5 `&lt;audio&gt;` 标签,结合React的状态管理和事件处理,实现播放、暂停、进度和音量控制等功能。通过代码示例展示基本实现,并探讨常见问题如自动播放限制、进度条不更新、文件加载失败及多实例冲突的解决方案。同时,避免易错点如忽略生命周期管理、错误处理和性能优化,确保高效开发与良好用户体验。
61 23
|
9天前
|
缓存 前端开发 JavaScript
React 视频弹幕组件 Video Danmaku
本文介绍了如何在React中构建视频弹幕组件,提升用户观看体验和互动性。首先通过Create React App初始化项目,并集成`react-player`作为视频播放器。接着实现基本弹幕功能,包括评论的接收与显示,使用CSS动画实现滚动效果。针对常见问题如弹幕重叠、性能下降及同步问题,提供了随机化位置、分批加载和监听播放进度等解决方案。最后探讨了弹幕分类和特效等高级技巧,确保弹幕系统的高性能和良好用户体验。
49 23
|
4月前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键
|
3月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
119 9
|
4月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
4月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
3月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
275 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
3月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
71 1