介绍
React是用于构建用户界面的JavaScript库, [1] 起源于Facebook的内部项目,该公司对市场上所有 JavaScript MVC框架都不满意,决定自行开发一套,用于架设Instagram的网站。于2013年5月开源。
框架用途
React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
框架特点
1.声明式设计:React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React 能高效更新并渲染合适的组件
2.组件化: 构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。
3.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
4.灵活:无论你现在使用什么技术栈,在无需重写现有代码的前提下,通过引入 React 来开发新功能。
React官方网址
React – A JavaScript library for building user interfaces
正文
React安装
1.安装脚手架:npm i -g create-react-app
2.创建react项目:create-react-app 项目名
创建成功
3.启动项目
React项目说明
React基础使用
JSX语法
JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法,它的目的不是要在浏览器或者引擎中实现,它的目的是通过各种编译器将这些标记编译成标准的JS语言。
JSX实际上只是JavaScript的一种语法糖,能让我们更方便的在JavaScript中书写node节点,让我们更为直观地看到节点的结构
JSX规则与用法
模板渲染
1.文本渲染
写法1 文本渲染{}
写法2 html文本渲染:dangerouslySetInnerHTML={{ __html: this.state.msg }}
2.条件渲染
写法1 三元运算符:条件?<>:<>
写法2 &&符号:{{条件&&<>}}
3.列表渲染
事件
特点
1.方法名称:
React中采用了驼峰命名法,从第二个单词的字母开始大写
原生js的写法是全部小写
vue中是通过v-on:加上触发事件(也是全小写的,但是没有on)
2.传值:
React中事件接受的值是一个方法,需要用{}包裹起来
原生js的事件接受的值是一个字符串
vue中的事件接受的值是一个字符串(方法名称)
事件的使用
1.普通事件
2.传参事件
3.bind传参
更新状态State
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
有两个参数,this和回调函数,回调函数一般不写
小白编写,仅供参考