React学习(一):React基础概念 —— 官方文档

近期在学习React,发现React的很多写法都更加接近原生JS,不得不说看起来有些吃力,GitHub上有近期学习的一些demo和资料,感觉要学习的东西还很多呀!
GitHub地址:
https://github.com/K-Stella/Learn-React

React基础概念 —— 官方文档

React的基本组成:元素和组件

元素是组成React应用的最小砖块

JSX

JSX是JavaScript和XML结合的一种格式。

React DOM —— 保持DOM与React元素的一致

组件 —— 将UI拆分为独立可复用的代码片段

分为函数组件与class组件

React会将小写字母开头的组件视为原生DOM标签,自定义的组件名称必须以大写字母开头

所有的React组件都必须像纯函数一样保护它们的props不被更改。

纯函数既传入的props不能发生改变。

State & 生命周期

props是组件对外的接口,state是组件对内的接口。

正确地使用State
  1. 不能直接修改State

    当每次需要改变State的值时,需要通过setState()进行修改;

    构造函数是唯一可以给this.state赋值的地方

  2. State的更新可能是异步的

    注意:不能依赖this.props 和 this.state更新下一个状态。

    如何解决:让setState()接收一个函数而不是一个对象。

  3. State是“单向”的数据流

事件处理

  • 事件的命名采用小驼峰
  • 使用JSX语法时需要传入一个函数作为事件处理函数,而不是一个字符串

官方教程

环境准备

概述

React是什么?

React是一个声明式,高效且灵活的用于构建用户界面的JavaScript库。

通过props传递数据

在React应用中,数据通过props的传递,从父组件流向子组件。

注意:

在JavaScript class中,每次你定义其子类的构造函数时,都需要调用super方法。因此,在所有含有构造函数的React组件中,构造函数必须以super(props)开头。

在React中,有一个命名规范,通常会将代表事件的监听prop命名为on[Event],将处理事件的监听方法命名为handle[Event]。

发布了46 篇原创文章 · 获赞 25 · 访问量 11万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览