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语法时需要传入一个函数作为事件处理函数，而不是一个字符串

官方教程

环境准备

• 方式一：在浏览器中编写代码

  https://codepen.io/gaearon/pen/oWWQNa?editors=0010

• 方式二：搭建本地开发环境

  1. 首先，电脑需安装nodejs环境

  2. 创建新项目脚手架语句

     npx create-react-app my-app
     

概述

React是什么？

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

通过props传递数据

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

注意：

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

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