React组件实例三大属性state props refs使用详解

2024-07-29 15:22:59

一、 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>

编辑

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>

以上就是React组件实例三大属性state props refs使用详解的详细内容，更多关于React组件state props refs的资料请关注我们其它相关文章！

React三大属性之Refs的使用详解

refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候,用来获取节点的方法.在React官方的解释中,它的适用范围如下: 管理焦点,文本选择或媒体播放. 触发强制动画. 集成第三方 DOM 库. React文档中再三强调,请不要过度使用refs,所以当我们可以用dom原生对象解决时,尽量不要使用refs 依照之前的写法,首先是给出类组件和函数组件中refs的写法类组件在类中,refs有三种方式,目前最常用的是回调的形式使用,分别进行演示 //直接定义refs,已废弃
react函数组件useState异步,数据不能及时获取到的问题

目录 react useState异步,数据不能获取到问题解决方法一 react中useState的使用及注意事项基本使用注意事项 react useState异步,数据不能获取到 useState() 属于异步函数,在useState() 第一次存储的时候,值会存储不上因为react中state的更新是异步的,我们setState后,react不会立刻对值进行改变,而是将其暂时放入pedding队列中.react会合并多个state,然后值render一次,所以不要在循环中使用use
React在组件中如何监听redux中state状态的改变

目录在组件中监听redux中state状态的改变解决方式 React和redux的状态处理在组件中监听redux中state状态的改变解决方式 1.在组件中引入store 2.在constructor构造器方法中,重写store.subscribe方法(该方法即是监听state状态改变的放过) 组件完整代码如下: import React, { Component } from 'react' import CSSModules from 'react-css-modules' imp
React三大属性之props的使用详解

上期讲了state,接下来讲讲props.props功能在于组件间通信(父子组件),首先说说在各种组件中的用法: 类组件 //父组件传值 class Father extends React.PureComponent{ render(){ return ( <Son value={"son"} /> ) } } class Son extends React.PureComponent{ render(){ return ( <div>this data is
如何深入理解React的ref 属性

概述首先,Refs 和 ref 是两个概念,Refs 是 React 提供的可用特定 API 创建的一个对象.该对象的结构如下: 这个对象只有一个属性就是 current ,那么这个对象是用来干嘛的呢? Refs 允许我们访问 DOM 节点或在 render 方法中创建的 React 元素.(DOM节点就是指原生DOM元素,在render()方法中创建的 React 元素就是指 React 的类组件元素) 我们可以想象这样一个需求,两个兄弟元素,一个是 div ,一个是 button.现在想实
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来更新对应的
Vue父组件向子组件传值以及data和props的区别详解

1.在父组件中定义 msg 属性 data:{ msg:'123 -我是父组件中的数据' }, 2.引用子组件父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用. 把父组件传递过来的 msg 属性,绑定到子组件的 parentmsg 属性上. <com1 :parentmsg="msg"></com1> 3. 在子组件定义部分,需要把父组件传递过来的 parentmsg 属性,先在pro
React组件三大属性之state,props,refs

目录 1.1基本理解和使用 1.1.1 使用React开发者工具调试 1.1.2 定义组件的方式 1.1.3 注意 1.1.4 渲染类组件标签的基本流程 1.2 组件实例的三大核心属性之一:state 1.2.1 理解 1.2.2 案例 1.2.3 在类式组件使用state 1.2.4 在类式组件使用state的简写方式 1.2.3 强烈注意 1.3 组件实例的三大核心属性之一:props 1.3.1 理解 1.3.3 作用 1.3.4 在类式组件使用props 1.3.5 在函数式组件使用pr
Vue组件化(ref,props, mixin,.插件)详解

目录 1.ref属性 2.props配置项 props总结 3.mixin混入 3.1.局部混入 3.2.全局混入 mixin混入总结 4.插件插件总结 1.ref属性被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 使用方式: 打标识:<h1 ref="xxx">.....</h1>或 <School ref="xxx"></Schoo
Vue常见组件间通信方案及典型应用场景详解

目录什么是组件通信 1.父子组件通信场景 2.兄弟组件通信场景 3.根组件和后代组件通信场景 4.插槽通信场景 5 无直接关系的组件通信场景 6 大型项目中的复杂组件通信场景 - Vuex状态管理 7 其他的一些组件通信方案总结什么是组件通信所谓组件通信,就是组件之间的数据交互,也就是把一个组件A里面的数据传递到另一个组件B,并能够让组件B根据这个数据更新界面. 在 Vue中,可用的通信方案有很多,下面给大家描述几个常用的组件通信方案及其典型的应用场景. 1.父子组件通信场景父子组件通
React项目使用ES6解决方案及JSX使用示例详解

目录不使用 ES6 绑定 JSX如何? 不使用 ES6 然而,在纯浏览器端使用ES6语法时,浏览器支持存在差异,这需要特殊处理才能正常运行. 支持ES2015桌面浏览器 Chrome:从51版开始,它可以支持ES6 97%的新功能. Firefox:53版本支持97%的ES6新功能. Safari:从版本10开始,ES6 99%的新功能都可以得到支持. IE:Edge 15可以支持96%的ES6新功能. Edge 14可以支持93%的新ES6功能.(IE7~11基本不支持ES6) class
React Native 混合开发多入口加载方式详解

在已有app混合开发时,可能会有多个rn界面入口的需求,这个时候我们可以使用RCTRootView中的moduleName或initialProperties来实现加载包中的不同页面. 目前使用RCTRootView有两种方式: 使用initialProperties传入props属性,在React中读取属性,通过逻辑来渲染不同的Component 配置moduleName,然后AppRegistry.registerComponent注册同名的页面入口这里贴出使用0.60.5版本中ios项目
React的生命周期函数初始挂载更新移除详解

目录概述 constructor 初始挂载更新移除概述在React中,生命周期函数指的是组件在某一个时刻会自动执行的函数 constructor 在类或组件创建的时候被自动执行,我们可以说它是生命周期函数,但它并不是React所特有的,所有的Es6对象都有这个函数,所以并不能说它是React的生命周期函数初始当数据发生变化时,render函数会被自动执行,符合我们对React生命周期函数的定义,所以它是React的生命周期函数,但在初始阶段,并不会有任何的React生命周期函数被
基于React实现表单数据的添加和删除详解

前言最近在学习React,做了一个简单的Demo,用以自勉及和有需要的朋友们参考学习. 实现功能在输入框中输入数据后,点击保存按钮,数据将会逐一显示在输入框下方,点击保存后显示的任何一条数据,该数据即可被删除. 实现思路在开始实现之前,我们需要理清我们的思路,这样才能更好地去完成预定功能. 点击保存按钮时,输入框中的数据读取,可通过onChange绑定事件,获得输入框数据:e.target.value 自定义一个事件,输入数据后,点击保存按钮时,数据的存储操作交由该事件完成当不断点击保存