本篇内容介绍了“React中State与Props区别和用法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了宜昌免费建站欢迎大家使用！
在React当中，当你更新组件的state，然后新的state就会重新渲染到页面中。在这个时候不需要你操作任何DOM。你也可以认为组件在React当中是一个状态机（State Machines）。当用户进行操作时会实现不同的状态，然后再渲染到你的页面中，让你的页面与数据始终保持一致。
如何定义State
定义一个合适的State，是正确创建组件的第一步。State必须能代表一个组件UI呈现的完整状态集，即组件的任何UI改变，都可以从State的变化中反映出来；同时，State还必须是代表一个组件UI呈现的最小状态集，即State中的所有状态都是用于反映组件UI的变化，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态。
组件中用到的一个变量是不是应该作为组件State，可以通过下面的4条依据进行判断：
1.这个变量是否是通过Props从父组件中获取？如果是，那么它不是一个状态。
2.这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。
3.这个变量是否可以通过其他状态（State）或者属性(Props)计算得到？如果是，那么它不是一个状态。
4.这个变量是否在组件的render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更适合定义为组件的一个普通属性，例如组件中用到的定时器，就应该直接定义为this.timer，而不是this.state.timer。
如果对状态不好理解的朋友，你可以认为状态即是数据！
State 与 Props 区别
props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。根据对外接口props 和对内接口state，组件计算出对应界面的UI。
主要区别：
State是可变的，是一组用于反映组件UI变化的状态集合；
而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。
在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态
现在我们先来通过ES6类React.Component完成一个通过点击按钮对DIV进行显示与隐藏的操作，效果如下：
咱们先将页面进行初始化：
Title
