一、关于React
用于构建用户界面的 JavaScript 库。由 Facebook 开发且开源
那么为什么要学习React呢
原生 JavaScript 的痛点：
- 操作 DOM 繁琐、效率低
- 使用 JavaScript 直接操作 DOM，浏览器进行大量重绘重排
- 原生 JavaScript 没有组件化编码方案，代码复用率低
React 的特点：
- 采用组件化模式、声明式编码，提高开发效率和组件复用率
- 在 React Native 中可用 React 语法进行移动端开发
- 使用虚拟 DOM 和 Diffing 算法，减少与真实 DOM 的交互
二、JSX语法
- 全称：JavaScript XML
- React 定义的类似于 XML 的 JS 扩展语法；本质是 React.createElement() 方法的语法糖
- 作用：简化创建虚拟 DOM
语法规则
- 定义虚拟 DOM 时，不要写引号
- 标签中混入 JS 表达式需要使用 {}
- 指定类名不用 class，使用 className
- 内联样式，使用 style={ { key: value } } 的形式
- 只能有一个根标签
- 标签必须闭合，单标签结尾必须添加 /：<input type="text" />
- 标签首字母小写，则把标签转换为 HTML 对应的标签，若没有，则报错
- 标签首字母大写，则渲染对应组件，若没有定义组件，则报错
条件渲染
// 1. 导入 React
import React from 'react';
import ReactDOM from 'react-dom';
const isLoading = true;
const loadData = () => {
if(isLoading) {
return <div>loading...</div>;
}
return <div>加载完成~</div>
}
const title = <h1>Hello {loadData()}</h1>;
// 3. 渲染 React
ReactDOM.render(title, document.getElementById('root'));其中包括三元运算符和逻辑运算符就不一一演示了~
三、组件化编程
-
组件是 React 的一等公民，使用 React 就是在用组件
-
组件表示页面中的部分功能
-
组合多个组件实现完整的页面功能
-
特点：可复用、独立、可组合
类式组件
-
约定1：类名称也必须要大写字母开头
-
约定2：类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或者属性
-
约定3：类组件必须提供 render 方法
-
约定4：render 方法中必须要有 return 返回值
// 创建 class 类，继承 React.Component，在里面提供 render 方法，在 return 里面返回内容
class Hello extends React.Component{
render(){
return (
<div>这是第一个类组件</div>
)
}
}
// 通过 ReactDOM 进行渲染
ReactDOM.render(<Hello />,document.getElementById('root'))函数式组件
- 约定1：函数名称必须是以大写字母开头
- 约定2：函数组件必须有返回值，表示该组件的结构
- 约定3：如果返回值为null，则表示不渲染任何内容
四、事件处理
事件绑定
-
React 事件绑定语法与 DOM 事件语法相似
-
语法：on+事件名称=事件处理函数，比如 onClick = function(){}
-
注意：React 事件采用驼峰命名法
类组件—事件绑定
export default class extends React.Component {
clickHandle(e){
console.log('点了')
}
render(){
return (
<div><button onClick = {this.clickHandle}>点我点我点我</button></div>
)
}
}函数组件—事件绑定
export default () => {
function handleClick(e) {
console.log(e.nativeEvent);
}
return (
<div onClick={handleClick}>hello world</div>
)
}事件对象
- 可以通过事件处理函数的参数获取到事件对象
- react中的事件对象叫做合成事件
- 合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
- 除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口
- 如果要获取原生事件对象，可以通过nativeEvent属性获取
export default class extends React.Component {
clickHandle(e){
// 获取原生事件对象
console.log(e.nativeEvent.target.innerHTML);
}
render(){
return (
<div><button onClick = {this.clickHandle}>点我点我点我</button></div>
)
}
}有状态组件和无状态组件
函数组件又叫做无状态组件，类组件叫做有状态组件
-
状态(state) 即数据
-
函数组件没有自己的状态，只负责数据展示
-
类组件有自己的状态，负责更新 UI，让页面动起来
事件绑定的this指向
1.点击事件使用箭头函数，利用箭头函数自身不绑定this的特点
2.利用bind方法，利用原型 bind 方法是可以更改函数里面 this 的指向的，所以我们可以在构造中调用 bind 方法，然后把返回的值赋值给我们的函数即可
3.class的实例箭头函数
五、组件化的CSS
css_modules
-
css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的
-
React的脚手架已经内置了css modules的配置
-
.css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等
-
css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案
-
但是这种方案也有自己的缺陷，引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的，要使用 .homeTitle 驼峰
-
所有的className都必须使用{style.className} 的形式来编写
-
不方便动态来修改某些样式，依然需要使用内联样式的方式
CSS in JS
-
是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态
-
CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等
有不明白的或者有其他问题的可以评论区留言噢
今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！
