React 学习笔记
导
1. react- 用于构建用户界面的javaScript 库
- 发送请求获取数据
- 处理数据（过滤、整理）
- 操作dom 呈现页面
react 是一个将数据渲染微HTML视图的开源 JavaScript库
2. facebook开发，且开源
3. 原生JavaScript
原生javaScript操作DOM繁琐、效率低（DOM-APL 操作 UI)。
使用javascript直接操作DOM,浏览器会进行大量的重绘重排。
原生JavaScript没有组件化编码方案，代码复用率低。
4. react 特点
- 采用组件化模式、声明式编码，提高开发效率及组件复用率。
- React Native 中可以使用 React语法进行移动端开发
- 使用虚拟DOM + 优秀的Diffing算法，尽量减少与真实DOM的交互
1、hello react
react 核心库和react-dom的引入要放在前面
hello_react
2. 创建虚拟DOM
JSX创建虚拟DOM更方便，相当于语法糖
// 1. 创建虚拟DOM
const VDOM = (
Hello,React
) /* 不用写引号，因为不是字符串,是jsx*/JS 创建虚拟DON
// 1. 创建虚拟DOM
const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span',{}, 'hello, React'))3. 虚拟DOM和真实DOM
虚拟DOM：
1、本质上是一个Object对象，一般对象
2、虚拟DOM比较 ”轻",真实DOM比较 “重”， 因为虚拟DOM是React内部在用，无需真实DOM这么多的属性
3、虚拟DOM最终会被React转化成真实DOM,呈现在页面上。
4. jsx 语法规则
--XML早期用于存储和传输的数据
-- JSON 也是用于存储和传输的数据，js内置对象
1、定义虚拟DOM时，不要写引号
2、标签中混入JS表达式时要用 {}
3、样式的类名指定不用 class,要用className.
4、内联样式，要用style = {{key: value}} 的形式去写
5、只有一个跟标签
6、标签必须闭合
7、标签首字母
（1）若小写字母开头，则将该标签转为 html同名元素，若html中无该标签，则报错
（2）若大写字母开头，react就去喧嚷对应的组件，若组件没有定义，则报错
4_JSX语法规则
5. 函数式组件
06_函数式组件
* 执行了ReactDOM.render(
* 1、React解析组件标签，找到了MyComponent组件
* 2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实的DOM，随后呈现在页面上。
注：严格模式下，禁止 this 指向 window
官方例子：
function Welcome(props) {
return Hello, {props.name}
;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = 这个例子中发生了什么：
- 我们调用
root.render()函数，并传入 - React 调用
Welcome组件，并将{name: 'Sara'}作为 props 传入。 Welcome组件将Hello, Sara
- React DOM 将 DOM 高效地更新为
Hello, Sara
6. 类的基本知识
1. 类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
2. 如果A类继承了B类，且A类型写了构造器，那么A类构造器中的super是必须要调用的
3. 类中所定义的方法，都是放在了类的原型对象上，供实列使用
07_类基本知识
4、 类中可以直接写赋值语句, 如下的含义 会直接往Car实例对象添加一个属性，名为 a， 值为 1
class Car {
// 类中可以直接写复制语句，
// 会直接往Car实例对象添加一个属性，名为 a， 值为 1
a = 1
}
const c1 = new Car()
console.log(c1);7. 类式组件
执行了ReactDOM.render(
1、React解析组件标签，找到了MyComponent组件
2、发现组件是使用类定义的，随后new 出来该类的实例，并通过该实例调用到原型上的render方法。
3、将render 返回的虚拟DOM转为真实DOM。随后呈现在页面上
8. 组件中的state
- state 的值是对象（key-value的组合）
- 组件中render方法中的this为组件实例对象
- 组件自定义函数中的this 为 undefined解决办法：
- bind 方法
- 箭头函数
- 状态数据不能直接修改更新，必须要用内置APL--- setState
09_组件实例的三大核心属性_state
(1) 元素绑定事件
注意写法：onClick = { this.demo }，不是 onClick = { this.demo() }, 是函数的回调，不是函数的执行。
render() {
return 今天天气很{this.state.isHot ? '炎热' : '凉爽'}, {this.state.wind}
}（2） this的指向问题
bind 可以解决 1、生成新的 函数 2、更改函数中的 this
(3) 状态（state) 必须通过setState进行更新，且更新事一种合并，不是替换
（4）render 函数调用，页面更行； 状态更新多少次，render函数就会调用多少次
9. state 精简
1. 不再写构造器
2. 自定义方法-----要用 赋值语句的形式 + 箭头函数
注： 箭头函数没有 this，它会直接找外层的 this
11. props
-
在类组件中 直接 this.props就可以拿到 组件传进来的值对象了
-
ES6 中三点运算符，可以展开数组，但是不可以展开 Object
-
React 的组件的props传值，可以只用三点运算符 展开 Object,仅限于 组件的props的传值
-
props是只读，不可以修改
-
构造器是否接受 props,是否 传递给super,取决于：是否希望在构造器中通过this访问 props
// 1、创建类式组件
class Person extends React.Component {
// 初始化状态
state = {}
render() {
const {name, sex, age} = this.props
return (
- name: {name}
- sex: {sex}
- age: {age}
)
}
}
const p = { name: 'tom', sex: 'man', age: 18}
// 2、渲染组件
ReactDOM.render( React内置了一些 方法 对 props传入的属性进行 检查，15.5版本之后React.PropTypes 已移入另一个包中了
propTypes 使用方式：
// react 15.6版本之后
Person.propTypes = {
name: PropTypes.string.isRequired, // name 必填· 字符串
sex: PropTypes.string, // sex 字符串
age: PropTypes.number, // age 数字
speak: PropTypes.func, // speak 函数
}设置默认值，defaultProps
// 指定默认标签属性值
Person.defaultProps = {
sex: 'man', // sex 默认值为 man
age: 18,
}12. props简写
把 props的限制都写在类里面，static 关键字定义
12_props的简写
13. 函数组件使用
function Person(props) {
const {name, sex, age} = props
return (
- name: {name}
- sex: {sex}
- age: {age}
)
}
Person.propTypes = {
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
}
// 指定默认标签属性值
Person.defaultProps = {
sex: 'man', // sex 默认值为 man
age: 18,
}
const p = { name: 'tom', sex: 'man', age: 20}
// 2、渲染组件
ReactDOM.render(14. 字符串形式的 ref
官方不建议使用，以后会弃用
注意是 ref ，不是 refs
17. 事件处理
- 通过onXxx属性指定事件处理函数（注意大小写）
- React使用的是自定义（合成）事件，而不是使用的原生的DOM事件 --- 为了更好的兼容性
- React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）--为了高效
- 通过event.target得到发生事件的DOM元素对象--- 不要过渡使用re
18. 非受控组件
非受控组件相对于 受控组件，属性没有在 state状态里面维护的都是 非受控组件，现造现取