React(笔记篇)
react基础
Mvc中的视图V react特点： 1.声明式 2.基于组件 安装 npm I react-dom 引入react 和react-dom 两个文件 react脚手架 npx create-react-app 项目名称 npx create-react-app my-app
jsx：在js中写html {} 在jsx结构变量
创建组件
创建js函数组件 ||又叫做无状态组件 函数：大写字母开头 必须要有返回值return 可以直接使用箭头函数 可以return null function Hello () { return (
创建类组件 || 有状态组件 可以return null 1.:类名称也必须以大写字母开头 2.类组件应该继承React.Component父类,从而可以使用父方法 3.类组件必须提供render()方法 4.render()方法必须有返回值,表示该组件的结构
class Hello extends React.Component{ render() { return (
React 事件绑定语法与DOM事件语法相似 ●语法: on+事件名称= {事件处理程序} ,比如: onClick={0=> {} ●注意: React事件采用驼峰命名法,比如: onMouseEnter、onFocus
state的基本使用 ●状态( state )即数据,是组件内部的私有数据,只能在组件内部使用 ●state 的值是对象,表示一个组件中可以有多个数据 ●状态即数据 ●状态是私有的 ,只能在组件内部使用 ●通过 this.state来获取状态
setState()修改状态 ●状态是可变的 ●语法: this.setState({要修改的数据}) ●注意:不要直接修改state中的值,这是错误的! ! ! ●状态是可变的 ●语法: this.setState({要修改的数据}) ●注意:不要直接修改state中的值,这是错误的! ! ! ●setState() 作用: 1.修改state 2.更新UI ●思想: 数据驱动视图
解决方法中的this指向
1.使用箭头函数
2.在html页面中方法抛出的时候使用箭头函数包方法
3.使用function.prototype.bind（）需要在constructor里面直接初始化this指向
this.addOne = this.addOne.bind(this)
this.方法名称 = this.方法名称.bind（this）
受控组件 就是html的绑定值是双向绑定的调用渲染的同时调用了this.setState
渲染视图的时候同时调用set
非受控组件是使用ref 使用原生的dom方式获取表单元素的值
在 ref节点需要在constructor中初始化
this.txteRef = React.createRef()
react基础总结
1.组件的两种创建方式:函数组件和类组件 2.无状态(函数)组件,负责静态结构展示 3.有状态(类)组件,负责更新UI ,让页面动起来 4.绑定事件注意this指向问题 5.推荐使用受控组件来处理表单 6.完全利用JS语言的能力创建组件,这是React的思想
react组件进阶
组件通信
可以传任何属性的东西下去 包括组件节点 传节点的话有点插槽的意思
1.父传子 在子组件标签上写一个属性，子组件里面用props
2.子传父 在父组件里面定义一个回掉方法，自己不要调用，在子组件标签上用属性传下去， 子组件调用传子上来
3.兄弟组件 ：就是父组件管理数据 修改数据，修改方法，数组都给子传下去，数据通信
3.1：将共享状态提升到最近的公共父组件中 ,由公共父组件管理这个状态
3.2：思想:状态提升
3.3：公共父组件职责 : 1. 提供共享状态2.提供操作共享状态的方法
3.4：要通讯的子组件只需通过 props接收状态或操作状态的方法
Context ：可以跨组件传值
1.调用React. createContext(创建Provider (提供数据)和Consumer (消费数据)两个组件。
const { Provider, Consumer } = React. createContext ()
2.使用Provider组件作为父节点。
<Provider>
<div className="App">
<Child1 />
</div>
</ Provider>
3.设置value属性,表示要传递的数据。
<Provider value="pink">
4.调用Consumer组件接收数据。
<consumer>
{data => <span>data参数表示接收到的数据-- {data}</span>}
</Constmer>
props深入 props深入
54 children属性 children 属性:表示组件标签的子节点。当组件标签有子节点时, props就会有该属性 children 属性与普通的props-样,值可以是任意值(文本、React元素、 组件,甚至是函数)
Props的校验 就是定义props的属性传入的类型 需要下载第三方的包： npm i props-types import PropTypes from 'prop-types' 1.常见类型：array， bool， func， number， object， string 2.React元素类型：element 3.必填项：isRequired 4.特定结构的对象：shape（{}） // 添加校验 Hello.propTypes = { colors: PropTypes.array } 组件名称.propTypes = { 属性：PropTypes.array， 属性：PropTypes.array.isRequired } 默认值props Hello.defaultProps = { pageSize: 10 }
生命周期 只有类组件才有生命周期 Class 创建时=》更新时=》卸载时 创建时 挂载阶段 constructor() =====> render() =====> componentDidMount()
constructor ： 1.可以用来初始化 state 2.为事件处理程序绑定this render： 渲染UI 不能调用setStats() compeonentDidMount 1.发送网络请求 2.DOM操作
更新时 render() ======》componnentDidUpdata() render: 1.setState() 2.forceUpdate() //这个是在组件中执行这个方法强制更新render 3.组件接收到新的props componnentDidUpdata: 1.发送网络请求 2.DOM操作 注意：如果要setState() 必须放在一个if条件中
卸载时 卸载阶段 组件从页面消失 componentWillUnmount() 清除定时器
不常用的勾子函数 组件复用 render props模式 思路分析： 将要复用的state和操作state的方法封装到一个组件中 在使用组件时， 添加一个值为函数的prop，通过函数参数来获取 需要组件内部实现 使用该函数的返回值作为要渲染的ui内容 需要组件内部实现 65
70高级组件 高阶组件就是一个函数 高阶组件内部创建了一个类组件 把组件传进高阶组件里面去渲染 使用with开头的 大写 W 在高阶组件中传入组件 rent 的时候 把对应的状态通过返回值加在高阶组件包后的组件返回值上 72
