React 组件的属性还有状态都可以看成是在组件里可以使用的数据，属性的值是在使用组件的时候设置的，一般就是在组件的父组件那里设置组件的属性，在组件的内部，我们不能修改组件的属性的值。

组件里的 state，也就是状态，也是在组件里可以使用的数据，这些数据属于组件内部，可以任意修改。可以使用组件的 setState 这个方法设置组件的状态，这样如果状态跟之前有变化，组件就会被重新渲染，显示变化之后的样子。

定义 state

React 组件里有个 state 实例属性，通过它可以使用组件的状态。设置组件初始的 state ，可以先在组件里添加一个 constructor，类的构造方法，要给它添加一个 props 参数，类型是 AppHeaderProps，然后在构造方法里要先执行一下 super 这个方法，把组件的属性，也就是 props 交给它。

下面可以设置一下组件的 state，设置一下 this.state ，等于一个对象，里面添加一个 emoji，然后随便给它一个值。

使用 state

在组件的 render 方法里，可以用一下组件的状态，解构一下 this.state，需要的是它里面的 emoji。提示 不存在 emoji 这个属性。这是因为这个 react 项目用了 typescript，所以需要设置一下组件的状态的类型。

在上面定义一个类型，名字可以是 AppHeaderState，在里面添加一个 emoji ，类型是 string。

然后设置一下 React.Component 的第二个参数，它就是组件的状态的类型，设置成 AppHeaderState。

这样在 render 方法里解构组件状态的时候就不会再提示错误了，这里我们再用一下这个 emoji，在 JSX 里插入表达式可以先用一组大括号，里面添加一个 emoji。

在浏览器上预览一下，这回在页面上显示的标题内容里有一个表情符号，它来自组件状态里的 emoji 这个属性。

在组件里设置组件的初始 state，除了可以在构造方法里设置，还可以使用类字段的形式设置，回到项目，我们先注释或者删除掉在组件里添加的构造方法。

在类里面添加一个类字段，名字是 state，类型是 AppHeaderState，设置一下它的值，一个对象，里面添加一个 emoji，再设置一下对应的值。得到的效果跟在构造方法里设置状态的初始值是一样的。