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 = (<h1> hello react , {name}</h1>)

ReactDom.render = (title,document.getElementById('root'))

5.条件渲染

const isLoading = true

const isLoading = () => {

if(isLoading) { return <div>isLoading...</div> }

return <div>加载完成，显示数据。</div>

}

const title = (<h1>条件渲染：{ isLoading() } </h1>)

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=> <li key={item.id}>{item.name}</li>)

)

ReactDom.render = (list,document.getElementById('root'))

7.样式处理（行内，ClassName）

React第二天学习笔记

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

8.1 函数创建组件：函数名要以大写字母开头，函数组件必须要有返回值

列：function Hello () {

return (

<div>这是我的第一个函数组件</div>

)

}

ReactDOM.render(<Hello/>,document.getElementById('root'))

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

①传递数据<Hello name="Jack" age="19"/>

②接收数据（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(

<Child onIncrement={this.onIncrement}/></div>)

}

const child1=props=>{return <h1>计数器：{props.count}</h1>}

const child 2=props=>{return <button onClick={()=>props.onIncrement()}>+1</button>}

ReactDOM.render(<Counter/>,document.getElementById('root'))

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 ( <h1>Hi,{props.colors}</h1> ) }

APP.propTypes = {

//约定color属性值为arry类型

//如果类型不对，则报出明确错误，便于分析错误原因

color:propTypes .array }

③props的默认值

★场景：分页组件——每页显示条数

★作用：给props设置默认值，在末尾传入props时生效。

function APP (props) {

return (

<div> 显示props的默认值：{ props.pageSize } </div>

)

}

//设置默认值

APP.defaultProps = {

pageSize: 10

}

//不传入 pageSize 属性

ReactDom.render(<APP/>,document.getElementById('root'))

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= ( ) = > <p>页面一的内容</p>

♥ 使用Router组件包裹整个应用

const APP = ( ) =>(

<div>

<h1>React路由基础</h1>

♥ 指定路由入口

♥ 指定路由出口

</div>

</Router>

)

ReactDom.render(<APP/>,document.getElementById('root'))

②常用组件说明

♥ 两种常用Router:HashRoute（使用URL的哈希值实现）r和BrowserRouter(推荐使用BrowserRouter)

♥ Link组件：用于指定导航链接（相当于a标签）

♥ Route组件：指定路由展示组件相关信息

③编程式导航：通过JS代码来实现页面跳转

♥ history 是react路由提供的，用于获取浏览器历史记录的相关信息

♥ push(path）:跳转到某个页面，参数path表示要跳转的路径

♥ go(n):前进或后退都某个页面，参数n表示前进或后退页面数量（比如：-1表示后退到上一个页面）

④默认路由：进入页面时就会匹配的路由

♥ 默认路由path为：/

♥ <Router path='/' component={Home}>

⑤模糊匹配规则

♥ 默认情况下，react路由是模糊匹配模式

♥ 模糊匹配规则：只要pathname以path开头就会匹配成功

♥ 解决模糊匹配问题：给组件添加exact属性，让其变成精确模式

♥ 精确模式：只有当path和pathname完全匹配时才会展示该路由

<Route exact path='/' component={...}/ > (此时，组件只能匹配pathname=‘/’ 这一种情况)

推荐：给默认路由添加exact属性

React学习笔记