React第一天学习笔记
1.React是构建用户界面的javascript库。
2.初始化命令：npx creat-react-app '项目名称'
cd ‘项目名称’：进入到项目中
npm start(或者yarn start):启动项目
3.特殊属性名：class=>className , for=> htmlFor , 驼峰式命名
4.jsx是react的核心内容（在javascript中使用html描述UI结构）
用jsx来创建元素，用ReactDom.render()来渲染元素
列：import React from 'react'
import ReactDom from 'reactDom'
const name = Bob
const title = (
hello react , {name}
)ReactDom.render = (title,document.getElementById('root'))
5.条件渲染
const isLoading = true
const isLoading = () => {
if(isLoading) { return
return
}
const title = (
条件渲染：{ isLoading() }
)ReactDom.render = (title,document.getElementById('root'))
6.列表渲染
const songs = [
{id:1,name:'suger'} , {id:2,name:'mood'} , {id:3,name:'master'}
]
const list = (
{songs.map(item=>
)
ReactDom.render = (list,document.getElementById('root'))
7.样式处理（行内，ClassName）
React第二天学习笔记
8.react组件的两种创建方式
8.1 函数创建组件：函数名要以大写字母开头，函数组件必须要有返回值
列：function Hello () {
return (
)
}
ReactDOM.render(
8.2 使用类创建组件（重点）
9.把组件抽离为独立的JS文件
①创建Hello.js文件
②在Hello.js文件中导入react(import React fron react")
③创建组件（函数或者类组件）
④在Hello.js中导出该组件（export default Hello）
⑤在index.js中导入hello.js组件
⑥渲染组件
10.React事件处理
10.1事件绑定
on+事件名称={事件处理程序}，onClick={() =>{} }
10.2 事件对象
11.有状态组件和无状态组件
①无状态组件：函数组件；有状态组件：类组件（状态即数据）
②函数组件没有自己的状态，只是负责数据展示（静）；类组件有自己的状态，负责更新ui，让页面动起来。
★state= { coumt:0 }
③setState()修改状态
★语法：this.setState({要修改的数据})
★this.setState({ count:this.state.count+1 })
④this指向问题：用class方法解决
12.受控组件（重点）和非受控组件
★受控组件与vue的v-model相似
React第三天学习笔记
12.props
①传递数据
②接收数据（props是一个对象）
★函数组件：{props.name}
★类组件：{this.props.name}
③props可以传递任何数据
④props是只读对象，不可修改
⑤在使用class时，写了构造函数式，应该将props的值传递给super(),否则，无法在构造函数中获取到props.
13.组件传值
①父传子
★父组件有数据（state）
★给子组件添加属性，值为state中的数据
★子组件中通过props接收数据
②子传父
★父组件提供回调函数（用于接收数据）
★把回调函数作为值，传给子组件
★子组件通过props调用回调函数
★传值给回调函数
③兄弟之间
★变量提升
class Counter extends React.Component{
state= {count:0 }
onIncrement=()=>{
this.setState({ count:this.state.count+=1 })
}
render(){
return(
}
}
const child1=props=>{return
计数器：{props.count}
}const child 2=props=>{return }
ReactDOM.render(
React第四天学习笔记
14.Context:跨组件传递state
①调用React.creatContext()创建Provider(提供数据）和consumer(消费数据)两个组件
②把Provider(提供数据）组件作为父节点
③设置value属性,表示要传递的值
④调用consumer接收数据
15.props深入
①children属性
②props效验
★装包props-types (npm i props-types)
★导入props-types （import PropTypes from 'props-types'）
★使用组件名.propTypes = {}来给组件添加效验规则
★效验规则通过PropTypes对象来指定
列：import PropTypes from 'props-types'
function APP (props) { return (
Hi,{props.colors}
) }APP.propTypes = {
//约定color属性值为arry类型
//如果类型不对，则报出明确错误，便于分析错误原因
color:propTypes .array }
③props的默认值
★场景：分页组件——每页显示条数
★作用：给props设置默认值，在末尾传入props时生效。
function APP (props) {
return (
)
}
//设置默认值
APP.defaultProps = {
pageSize: 10
}
//不传入 pageSize 属性
ReactDom.render(
React第五天学习笔记
16.生命周期
①创建时（挂载阶段）
★constructor() → render() 每次组件渲染都会触发，不能调用setState() → componentDidMount（组件挂载后）
②更新阶段
★执行时机：setState()，forceUpdate(),组件接收到新的props
★执行顺序：render() → componentDidUpdate() 如果要写setState()必须放在一个if条件句中，否则会迭代报错
③卸载时
★执行时机：组件从页面消失；执行清理工作：如清理定时器
React第六天学习笔记
17.组件复用
①复用什么：★ state ★ 操作state的方法
②两种方式：★ render props模式 ★ 高阶组件（HOC）
18.setState是异步更新状态
①更新数据
★ 可以多次调用setState（），但只会触发一次重新渲染
②推荐语法
★ 使用setState（（state，props）=>{}）语法
★ state：最新的state
★ props：最新的prop
③第二个参数（在状态更新后立即执行某个操作）
★ 语法setState（xx,[callback]）
this.setState(
(state,props) => { }
( ) => { console.log('这个回调函数会在状态更新后立即执行') }
)
this.setState(
(state,props) => { }
( ) => { document , title= ‘更新state后的标题是：’ + this.state.count }
)
19.JSX语法的转换过程
jsx语法 → creatElement() → React元素
React第七天学习笔记
20.组件更新机制
★ 父组件重新渲染时，也会重新渲染子组件，但指挥渲染当前组件子树（当前组件及其所有子组件）
★ setState(）的两个作用：修改state , 更新组件（UI）
①避免不必要的重新渲染
★ 使用钩子函数shouldComponentUpdate(nextProps,nextState)
②虚拟DOM和diff算法：可以避免不必要的算法
React第八天学习笔记
21.react路由
★ 前端路由功能：让用户从一个视图（页面）导航到另一个视图（页面）。
★ 前端路由是一套映射规则：是URL路径与组件的对应关系。
★ 简单说来，就是路径与组件的配对。
①使用方法
♥ 安装路由 yarn add react-router-dom
♥ 导入组件
import { BrowserRouter as Router,Route,Link } from ' react-router-dom '
const First= ( ) = >
页面一的内容
♥ 使用Router组件包裹整个应用
const APP = ( ) =>(
React路由基础
♥ 指定路由入口
页面一
♥ 指定路由出口
)
ReactDom.render(
②常用组件说明
♥ 两种常用Router:HashRoute（使用URL的哈希值实现）r和BrowserRouter(推荐使用BrowserRouter)
♥ Link组件：用于指定导航链接（相当于a标签）
♥ Route组件：指定路由展示组件相关信息
③编程式导航：通过JS代码来实现页面跳转
♥ history 是react路由提供的，用于获取浏览器历史记录的相关信息
♥ push(path）:跳转到某个页面，参数path表示要跳转的路径
♥ go(n):前进或后退都某个页面，参数n表示前进或后退页面数量（比如：-1表示后退到上一个页面）
④默认路由：进入页面时就会匹配的路由
♥ 默认路由path为：/
♥
⑤模糊匹配规则
♥ 默认情况下，react路由是模糊匹配模式
♥ 模糊匹配规则：只要pathname以path开头就会匹配成功
♥ 解决模糊匹配问题：给组件添加exact属性，让其变成精确模式
♥ 精确模式：只有当path和pathname完全匹配时才会展示该路由
推荐：给默认路由添加exact属性