黑马 React 学习记录

jsx的样式处理

react组件

1.react 组件介绍

2.react 组件的两种创建方式

2.1 函数组件

2.2 类组件

2.3 抽离为独立js文件

3.react 事件处理

3.1 事件绑定

3.2 事件对象

4.有状态组件和无状态组件

5.组件中的state和setState

5.1 state的基本使用

5.2 setState() 修改状态

6.事件绑定this指向

6.1 箭头函数

6.2 Function.prototype.bind()

6.3 class的实例方法

6.4总结

7.表单处理

7.1受控组件的概念

7.2非受控组件

7.3总结

组件通讯

1.组件通讯介绍

2.组件的props

2.1 基本使用

2.2 特点

3.组件通讯的三种方式

3.1 父传子

3.2子传父

3.3兄弟组件

4.Context

5.props 深入

5.1 children 属性

5.2 props 校验

5.3 props 校验-常见约束规则

5.4 props 默认值

6.组件的生命周期

6.1 组件的生命周期概述

6.2 生命周期的三个阶段

7.render-props 和高阶组件

7.1 React组件复用概述

7.2 render props 模式

7.3 高阶组件

7.4 总结

react 原理揭秘

1.setState() 的说明

1.1 更新数据

1.2 推荐语法

1.3 第二个参数

2.JSX语法的转化过程

3. 组件更新机制

4.组件性能优化

4.1减轻state

4.2 避免不必要的重新渲染

4.3 纯组件

5.虚拟DOM 和 DIFF算法

6.总结

react 路由

1.react 路由介绍

2.路由的基本使用

2.1 使用步骤

注意：react-router-dom 6.0.1版本难免会遇到以下报错

Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

react-router-dom 6 写法
Route 需要在 Routes 里，组件为 element,注意括号内为标签

function Example() {
	return (
	<div>
		<ul>
            <li><Link to="/">首页</Link></li>
            <li><Link to="/list/">list</Link></li>
        </ul>
        <Routes>
            <Route path="/" exact element={<Index/>}/>
            <Route path="/list/" element={<List/>}/>
        </Routes>
	</div>
	)
}

2.2 常用组件说明

3.路由的执行过程

4. 编程式导航

5. 默认路由

6.匹配模式

6.1 模糊匹配模式

6.2精确匹配

7.总结