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

2024-09-27 20:04:44

一、 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的ref 属性

概述首先,Refs 和 ref 是两个概念,Refs 是 React 提供的可用特定 API 创建的一个对象.该对象的结构如下: 这个对象只有一个属性就是 current ,那么这个对象是用来干嘛的呢? Refs 允许我们访问 DOM 节点或在 render 方法中创建的 React 元素.(DOM节点就是指原生DOM元素,在render()方法中创建的 React 元素就是指 React 的类组件元素) 我们可以想象这样一个需求,两个兄弟元素,一个是 div ,一个是 button.现在想实
React三大属性之Refs的使用详解

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

目录 react useState异步,数据不能获取到问题解决方法一 react中useState的使用及注意事项基本使用注意事项 react useState异步,数据不能获取到 useState() 属于异步函数,在useState() 第一次存储的时候,值会存储不上因为react中state的更新是异步的,我们setState后,react不会立刻对值进行改变,而是将其暂时放入pedding队列中.react会合并多个state,然后值render一次,所以不要在循环中使用use
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组件实例三大属性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 自定义一个事件,输入数据后,点击保存按钮时,数据的存储操作交由该事件完成当不断点击保存