Props

React框架定义了一个Props的概念，专门用来实现React组件接受参数的输入。
每个组件对象都会有props(properties的简写)属性。
组件标签的所有属性都保存在props中。
props是组件对外的接口：组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。

function HelloMessage(props) {return <h1>Hello {props.name}!</h1>;
}const element = <HelloMessage name="Runoob"/>;ReactDOM.render(element,document.getElementById('example')
);

React 组件使用props来相互通信。

父组件给子组件传值：父组件通过初始state，子组件通过this.props进行接收就可以

// 父组件 import React, { Component } from 'react';
import Home from './Home';    //引入子组件class App extends Component {constructor(props){super(props);this.state = {num: 90}          };render() {return (<div><Home name="raeam"  num={this.state.num}/>          </div>);}
}
export default App;

//子组件import React, { Component } from 'react';class Home extends Component {constructor(props){super(props);        };render() {return (<div>{this.props.name}  {this.props.num}   </div>);}
}export default Home;

React Props默认值：

React框架为类组件定义了一个默认Props – defaultProps,使用defaultProps默认值来实现React Props应用

类组件使用props、类组件外边定义默认值：

<div id="id-div-react"></div>
<script type="text/">var divReact = document.getElementById('id-div-react');//创建类组件class PropsReactComp extends React.Component {render () {return  <p>{this.props.default}</p>       }}//类组件添加默认值PropsReactComp.defaultProps = {default: '我是默认值'}ReactDOM.render(<PropsReactComp/>,divReact);
</script>

类组件使用props、类组件里面定义默认值：

//创建组件
class Person extends React.Component{constructor(props){//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问propssuper(props);console.log('constructor',this.props);}//对标签属性进行类型、必要性的限制static propTypes = {name:PropTypes.string.isRequired, //限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number,//限制age为数值}//指定默认标签属性值static defaultProps = {sex:'nv',age:18 }    render(){const {name,age,sex} = this.props//props是只读的//this.props.name = 'bei' //此行代码会报错，因为props是只读的return (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age+1}</li></ul>)}
}
//渲染组件到页面
ReactDOM.render(<Person name="南栀"/>,document.getElementById('test1'))

函数组件使用props

//创建组件
function Person (props){const {name,age,sex} = props;return (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>)
}//指定默认标签属性值
Person.defaultProps = {sex:'男',//sex默认值为男age:18 //age默认值为18
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))

React框架规定Props是不能被修改的，也就是说Props是个只读的参数。 但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变。

State

函数组件无状态属性，没有生命周期的概念，可以通过React Hooks模拟出来。

本文举例说明的是类组件的状态属性。

state是组件对内的接口：组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。
在class定义组件中添加state ：直接添加在constructor构造器中以this.state={} 的方式添加。
修改通过this.setState（{}）进行state的改变
访问通过this.state.属性名

使用State：

使用setState修改state

this.setState({comment:'Hello'})

constructor(props){super(props)// 定义state状态this.state = {flag: true,firstMsg: "天王盖地虎",lastMsg : "小鸡炖蘑菇"}
}

State向下流动：

一个组件可以选择将 state(状态) 向下传递，作为其子组件的 props(属性)
如果把组件树想像为 props(属性) 的瀑布，所有组件的 state(状态)就如同一个额外的水源汇入主流，且只能随着主流的方向向下流动。

<MyComponent title={this.state.title}/>

Ref

Refs在计算机中称为 弹性文件系统（英语：Resilient File System，简称ReFS）。
React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。
本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。

方式一：createRef()：

一般在构造函数中将refs分配给实例属性，以供组件的其它方法中使用
对于html元素：可以获取元素实例：

<div id="div-react"></div>
<script type="text/babel">class RefsComponent extends React.Component {constructor(props) {super(props);//在构造函数中初始化一个Ref,然后再return中就可以使用this.myRef = React.createRef(); console.log(this.myRef);}componentDidMount() {//this.myRef中有一个current属性this.myRef.current.innerHTML = '南栀'}render() {return (<div><div ref={ this.myRef }></div></div>)}}ReactDOM.render(<RefsComponent/>,document.getElementById('div-react'));
</script>

对于类组件：可以获取组件类的实例：

<div id="div-react"></div>
<script type="text/babel">class Parent extends React.Component {constructor(props) {super(props);this.myRef = React.createRef(); console.log(this.myRef);}componentDidMount() {//this.myRef中有一个current属性this.myRef.current.bianshen();  //父组件中调用子组件的方法}render() {return (<Children ref={this.myRef}/>)}}class Children extends React.Component {bianshen() {console.log('超人变身！！！');}render() {return <span>超人变身</span>}}ReactDOM.render(<Parent/>,document.getElementById('div-react'));
</script>

方式二：回调Refs

React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。
在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。

<div id="div-react"></div>
<script type="text/babel">class Example extends React.Component {constructor(props) {super(props);this.targetRef = null;this.myRef = (e) => this.targetRef = e;}componentDidMount() {if(this.targetRef) {this.targetRef.innerHTML = '南栀';}}render() {return <div ref={this.myRef}/>}}ReactDOM.render(<Example/>,document.getElementById('div-react'));
</script>

方式三：useRef(React Hooks)

import { useRef } from 'react';
function HookRef(props) {const inputElement = useRef();return (<div><input type="text" ref={inputElement}/><button onClick = {() => {inputElement.current.focus()}}>获得焦点</button></div>)
}export default HookRef;

Ref的作用：Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。在类组件中，React将ref属性中第一个参数作为DOM中的句柄。而函数组件中,react用hooks的api useRef也能获得ref。

【React】React三大属性：Props、State、Refs相关推荐

尚硅谷笔记——React组件的三大属性props、state、ref
state 理解 state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新 ...
React的三大属性之refs的一些简单理解
什么是refs? Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. Ref转发是一项将ref自动通过组件传递到子组件的技巧. 通常用来获取DOM ...
reactjs组件实例的三大属性之state属性使用示例
默认写法 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
React的核心概念—— Jsx、 Component、 Props、 Refs、 State
前端的3大主流框架:vue.angular.react React的核心思想:组件化 React的核心概念:组件/jsx/props/state/refs 一.React的概述 ui = user i ...
react笔记_07组件实例化对象的三大属性
目录前提状态(state) 作用语法状态使用总结属性(props) 展开运算符复习 props-作为属性传入数据 props-使用展开运算符展开对象 props-进行数据类型限制 prop ...
React Native之Props(属性)和State(状态)和简单样式简单使用
1 Props(属性)和State(状态)和简单样式简单使用App.js代码如下 /*** Sample React Native App* https://github.com/faceboo ...
React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件定义一个组件最简单的方式是使用JavaS ...
React学习：状态(State) 和属性(Props)
React :元素构成组件,组件又构成应用. React核心思想是组件化,其中组件通过属性(props) 和状态(state)传递数据. State 与 Props 区别 props 是组件对外 ...
React.js学习（二）、三大属性statepropsref
一. 组件实例对象属性state 简单示例 <script type="text/babel">//1.创建类式组件class StateComponent exten ...

【React】React三大属性：Props、State、Refs

文章目录

Props

State

Ref

【React】React三大属性：Props、State、Refs相关推荐

最新文章

热门文章