1.声明式和编程式
声明式:在声明式编程中,开发者通过定义问题的规则和约束,让计算机自主推导解决方案。(自动) eg:forEach,filter,map
编程式:在编程式编程中,开发者需要详细描述如何执行任务,包括控制流程、算法、数据操作等。(手动) eg:for循环
2.单项数据流概念
上方数据改动会引发下面所有用到数据的改动,而下方数据改动不会影响上方
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
双向数据流:
一个数据更改,会默认引发其他数据的更改
3.react的文件结构
4.jsx概念
a.jsx概念: javascript XML(HTML)的简写,表示在js代码中书写html结构
作用: 在react中创建HTML结构(页面的UI结构)
优势:采用类似与html结构的语法,降低学习成本
充分利用js的编程能力创建html结构
注意:jsx不是标准的js语法,是js的扩展语法,所以浏览器不能直接识别,需要babel转换成浏览器识别的js,
脚手架内置了babel@plugin-transform-react-jsx包
基本语法
b.jsx语法:
1)可以使用表达式 {js表达式}
表达式: 1) 数据类型 2)运算符 3)调用内置方法 str.split('').reverse().join('')
2) 不能执行语句(有过程) 循环语句 for while do..while 判断语句 if...else switch...case
3) 条件渲染:三元运算符或者逻辑与&&运算符
条件渲染 字符串 {num>100?'大于100':'小于100'}
条件渲染 标签或者组件 <div>{boo&&<MyButton></MyButton>}</div>
如果判断分支比较复杂,可以放置到专一的函数中处理复杂的分支
4) 循环渲染:通过map循环映射数组
{arr.map((item,index)=><li key={index}>{item}</li>)}
循环需要一个类型为number/string 不可重复的key值 为了diff算法性能,
5)使模板尽量精简: 复杂的逻辑放置在函数中处理,在模板中只调用函数
6)样式处理
1) 行内样式 通过style属性
2) 类名控制样式 动态控制类名
<p className={activeFlag?"active active1":'active1'} >active</p>
注意事项:
1. 必须需要根节点进行包裹,如果没有根节点 可以用<></>
2. 所有标签都要闭合
3. jsx类似于js语法,所有的属性或者属性值需要驼峰式写法
4. jsx支持多行,需要用()包裹
jsx中写的HTML结构最终生成js对象,本质是 React.createElement(component,prop,...children)的语法糖
5.key值注意事项:
1)key只会显示在虚拟dom内部,不会渲染到真实的dom中,用来进行react循环的性能优化
2)循环需要一个类型为不可重复的key值 为了diff算法性能
3)数据列表中的id可以作为key值
4) 如果没有id,则可以产生index作为key值
6.JSX是什么,它和JS有什么区别
JSX是react的语法糖,它允许在js中书写html结构,它不能被浏览器直接识别,需要通过webpack、babel之类的编译工具转换为JS执行
JSX与JS的区别:
JS可以被打包工具直接编译,不需要额外转换,jsx需要通过babel编译,它是React.createElement的语法糖,使用jsx等价于React.createElement
jsx是js的语法扩展,允许在js中书写html;JS是原生写法,需要通过script标签引入
7.react的理解
React 是一个构建用户界面javascript的库,和vue、angular并称前端的三大框架。react引领了很多新思想,世界范围内是最流行的js前端框架。
8.为什么学习react
- 原生js操作dom比较繁琐、效率低
- 使用原生js操作dom,浏览器会进行大量的重绘重排
- 原生js没有组件化的概念,导致代码复用率比较低
9.react的特点
- 声明式UI −React采用声明范式,可以轻松描述应用。
- 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
- 使用react native可以跨平台
- 高效 -使用虚拟dom+优秀的diffing算法,减少与dom的交互。
- 灵活 −React可以与已知的库或框架很好地配合。
- JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
- 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。