《深入React技术栈》个人总结之1.4React数据流（打卡三）

最新推荐文章于 2024-08-25 15:20:34 发布

twinkle_J

最新推荐文章于 2024-08-25 15:20:34 发布

阅读量327

点赞数

分类专栏： react 阅读笔记

本文链接：https://blog.csdn.net/twinkle_J/article/details/84895037

版权

react 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

阅读笔记

6 篇文章 0 订阅

订阅专栏

其实单纯的react并不是一个框架，在其官网上就有这么说明：react是个view js 库。

今天开始学习React数据流（之后会学习redux），接下来就会带领大家进入编码世界。

在React中，数据是之上而下的单项数据流（vue也是单向数据流且是双向数据绑定“v-model”指令），即从父组件到子组件。这条原则让组件关系变的简单且可预测

state与props是react组件中一个很重要的概念。

在顶层组件初始化props，react向下遍历整个组件树并且重新渲染所有相关的子组件。但是state只关心自己组件内部的状态，且这些状态中只能在组件内部改变。如果把组件看成一个函数的话，他就接受了props作为参数，内部由state作为函数的内部参数，最终返回一个虚拟DOM的实现。

1.4.1 state

在react没有结合Flux或者Redux（关于Flux与Redux后期我会各写一篇自己对它们的结构和工作流程的理解）框架前，其自身同样也可以管理组件的内部状态。在react中，把这一类状态统一称为state。

开始编码之前先大家一个提高开发效率的小技巧（vs code）

在文件=>首选项=>用户代码片段, 选择javascript react 在弹出来的新文件里输入下面的代码：

{
	"JSX": {
			"prefix": "jsx", // 触发的关键字 输入jsx按下tab键
			"body": [
					"import React from 'react'",
					"",// 空的一行
					"class Demo extends React.Component {",
					"\tconstructor(props) {",
					"\t\tsuper(props);",
					"\t\tthis.state\t=\t{",
					"",	
					"\t\t}",
					"\t}",	
					"\trender() {", // 有制表符的一行
					"\t\treturn (",
					"\t\t\t$1",    // 光标首次出现的位置            
					"\t\t)",
					"\t}",
					"}",
					"",
					"export default Demo",
			]
	}
}

现在让我们实现一个计数器的组件：

import React from 'react'

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state	=	{
      count: 0
    }
    this.handleClick = this.handleClick.bind(this)//在这里
  }
  // 个人比较建议下面的写法
  // 上面的那个绑定即（this.handleClick = this.handleClick.bind(this)）就可以去除掉了
  // handleClick = () => {

  // }
  handleClick(e) {
    e.preventDeault();
    this.setState({
      count: count + 1
    })
  }
  render() {
    const { count } = this.props
    return (
      <div>
        <p>{count}</p>
        <button onClick={this.handleClick()}>更新</button>
      </div>
    )
  }
}

export default Counter

当组件内部使用库内置的setState方法时，最大的表现行为就是该组件会重新渲染（改变了内部状态，组件需要更新）。

在这里我们的注意：setState是一个异步的方法，一个生命周期内所有的setState方法会合并操作。

有了这个特性，我们完全可以只用react来完成对行为的控制数据的更新和界面的渲染，当然，随着内容的深入，并不建议开发者使用这个方法，因为过多的使用setState这个方法，内部的状态会让数据流程变得混乱，后期项目就不好维护了。

state可能有两个内部状态