React之props的理解

一.state的简单介绍

React会将页面切分成独立的、可复用的组件，这就是React核心组件化思想。state就是React中组件的一个对象，更新组件的state，会使页面重新渲染。state在包含state的组件中定义和更改，因此可以将state看作是私有的，我们只能通过使用函数setState（）来更改state。

二.什么是props？

Props是属性的缩写，它是单个值，是在父组件中定义或已经在state中的值，并将这些值传递给其子组件。props本身是不可变的，但可以通过触发state的变化，反过来改变props本身的值。

三.如何改变props的值

props本身是不能改变的，通过使用props可以实现组件中的通信。父组件中的state就是传入子组件的props，所以当我们想改变props的值的时候，可以通过改变父组件的state来实现，我们可以在父组件中设置一个回调函数，当启动时（比如按钮的“onClick”）触发回调函数来更新或“setState”，通过为state设置新值，props的值也随之改变，根据新的值，组件会重新渲染。

代码如下：

import React, { Fragment } from 'react';
const NoteViewer = (props) => { 
	return ( <Fragment>
				<h2>{props.currentNote.title}</h2> 
			</Fragment>
	); 
}
export default NoteViewer;

import NoteViewer from ’./NoteViewer‘;
<div><NoteViewer currentNote={{title:"无语"}}/></div>

四.this.props的使用情景

在使用props时，会有前面有“this”的情况，会让人觉得混淆，在react中创建组件有两种方法，作为函数或类。当组件是类组件时，需要在prop的引用前加上“this”，让react知道prop是什么。否则将会得到一个“props is undifined”的错误。在函数组件中，我们不需要在对prop的引用前面加上“this”。