react html属性,react组件有哪些属性？

本教程操作环境：windows10系统、react16版，适用于所有品牌电脑。

React组件属性

props属性

react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

props属性的特点：

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

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

3.内部读取某个属性值：this.props.propertyName

4.作用：通过标签属性从组件外 向组件内传递数据(只读 read only)

5.对props中的属性值进行类型限制和必要性限制

代码示例

使用函数组件：import React from 'react';

import ReactDOM from 'react-dom';

//使用函数组件

function User(props){

//在组件中获取props属性值

return

{props.name}，{props.age}

}

//定义数据

const person ={

name:'张三',

age:20,

sex:'男'

}

ReactDOM.render(

, document.getElementById('root'));

使用类组件：import React from 'react';

import ReactDOM from 'react-dom';

//使用class组件

class User extends React.Component{

render(){

return (

{this.props.name}--{this.props.age}

);

}

}

//数据

const person ={

name:'张三',

age:20,

sex:'男'

}

ReactDOM.render(

, document.getElementById('root'));

state 属性

React 把组件看成是一个状态机(State Machines)。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面(不要操作 DOM)。

代码示例：import React from 'react';

import ReactDOM from 'react-dom';

class Person extends React.Component{

//构造方法

constructor(){

super();

this.state = {

name: 'tom'

}

}

render(){

//state属性是可修改的

this.state.name = 'jack';

return (

{this.state.name}

);

}

}

ReactDOM.render(, document.getElementById('root'));

设置状态:setStatesetState(object nextState[, function callback])

不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑

props和state属性的区别

props中的数据都是外界传递过来的；

state中的数据都是组件私有的；(通过Ajax获取回来的数据，一般都是私有数据)

props中的数据都是只读的，不能重新赋值；

state中的数据，都是可读可写的；

子组件只能通过props传递数据；

refs 属性

在React数据流中，父子组件唯一的交流方式是通过props属性；如果要修改子组件，通过修改父组件的属性，更新达到子组件props属性的值，重新渲染组件以达到视图的更新。但是，有些场景需要获取某一个真实的DOM元素来交互，比如文本框的聚焦、触发强制动画等给DOM元素添加ref属性

给类组件添加ref属性

代码示例：import React from 'react';

import ReactDOM from 'react-dom';

class Person extends React.Component{

constructor(){

super();

this.handleClick = this.handleClick.bind(this);

}

//点击事件

handleClick(){

// 使用原生的 DOM API 获取焦点

this.refs.myInput.focus();

}

render(){

return (

type="button"

value="点我输入框获取焦点"

onClick={this.handleClick}/>

);

}

}

ReactDOM.render(, document.getElementById('root'));

propTypes

用于进行props的类型检查；来自于prop-types库。// V15.5之后

import PropTypes from 'prop-types';

该方法适用于函数组件和class组件。

如果使用了@babel/plugin-proposal-class-properties插件，

可以直接在组件内部作为静态属性。class App extends React.Component {

static propTypes = {

name: PropTypes.string.isRequired

}

render() {

return(

{this.props.name}

)

}

}

在组件(class组件和函数组件都适用)外部：class App extends React.Component {

render() {

return(

{this.props.name}

)

}

}

App.propTypes = {

name: PropTypes.string.isRequired

}// 函数组件

function App(props){

return(

{props.name}

)

}

App.propTypes = {

name: PropTypes.string.isRequired

}

defaultProps

组件的属性。用于给props属性赋初始值, 当属性值为undefined时生效，null不生效。

既可以在组件内部也可以在组件外部。

运行在propTypes类型检查前。function App(props){

return(

{props.name}

)

}

App.defaultProps = {

name: "lyra"

}

ReactDOM.render(, window.root)

displayName

用于React Devtools中显示组件的名称。

函数组件和类组件都可以使用。主要在高阶组件时比较有用。function withSubscription(WrappedComponent) {

class WithSubscription extends React.Component {/* ... */}

WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;

return WithSubscription;

}

contextType

组件设置了该属性后，可以通过this.context访问context对象的值。import {ThemeContext} from './theme-context';

class ThemedButton extends React.Component {

static contextType = ThemeContext;

render() {

let props = this.props;

let theme = this.context; //最近的Provider提供的值

return (

{...props}

style={{backgroundColor: theme.background}}

/>

);

}

}

export default ThemedButton;