React基础
REACT(面向组件开发)
1.react高效原因
1)使用虚拟DOM技术,不总是直接操作页面真实DOM
2)DOM Diffing算法,最小化界面重绘
2.react使用jsx语法
js创建虚拟DOM太繁琐,所以使用jsx创建虚拟DOM
3.关于虚拟DOM
1.本质是Object类型的对象
2.虚拟DOM比较轻,真实DOM比较重,因为虚拟DOM是React内部在用,无需真实DOM上那么多属性
3.虚拟DOM最终会被react转换为真实DOM,呈现在界面上
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
4.react引用的js文件
①react.development.js react核心库
②react-dom.development.js 支持react操作DOM
③babel.min.js 将jsx转换为jS
④prop-types.js 用于对组件标签属性进行限制
5.jsx语法规则
①定义虚拟DOM时不要写引号
②标签中混入JS表达式要用{}
③样式的类名不要用class要用className
④内联样式要用style={{key:value}}的形式去写,font-size等要用fontSize小驼峰样式
⑤虚拟标签必须只有一个根标签
⑥标签必须闭合
⑦标签首字母
(1)若小写字母开头,则将标签转换为html中同名元素,若html中无该标签对应的同名元素.则报错
(2)若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错
6.区分jS代码(语句)和jS表达式
①表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
下面这些都是表达式
(1)a
(2)a+b
(3)demo(1)
(4)arr.map()
(5)function test(){}
②语句(代码):
下面这些都是语句(代码):
(1)if(){}
(2)for(){}
(3)switch(){}
7.模块和组件,模块化和组件化
①模块 js文件 作用:复用js,简化js,提高js运行效率
②组件 实现局部功能效果的代码和资源的合集(html/css/js/image等等)
③模块化 当应用的js都以模块来编写的,就是一个模块化的应用
④组件化 当应用以多组件的方式实现,这个应用就是一个组件化的应用
8.函数组件(适用于简单组件[无state的组件]的定义)
//1.创建函数式组件
function MyComponent(){
return <h2>函数组件</h2>
}
//2.渲染组件到界面 (组件首字母大写,标签闭合)
ReactDOM.render(<MyComponent/>,document.getElementById('test'));
react工作顺序:1.解析组件标签,之后寻找MyComponent组件
2.发现组件是使用函数定义的,随后调用该函数,将虚拟DOM转换为真实DOM,随后呈现在界面中.
9.类式组件(适用于复杂组件[有state的组件]的定义)
//1.创建类式组件 必须继承react中的一个类(React.Component)
class MyComponent extends React.Component(){
//必须有render
render(){
//render中的this代表MyComponent的实例对象<=>MyComponent的组件实例对象
//有返回值
return <h2>类式组件</h2>
}
}
//2.渲染组件到界面 (组件首字母大写,标签闭合)
ReactDOM.render(<MyComponent/>,document.getElementById('test'));
react工作顺序:1.解析组件标签,之后寻找MyComponent组件
2.发现组件是使用类定义的,随后new出该类实例,并通过该实例调用原型上的render方法.
3.将render返回的虚拟DOM转换为真实DOM,随后呈现在界面中.
10. 组件实例的三大核心属性
前端解构赋值
const [a,b,c] = [1,2,3]
const {name,age} = {name:'小明',age:18}
10.1 state
理解:1)state是组件对象的重要属性,值必须是对象(可以包含多个key-value的组合)
2)组件被称为'状态机',通过更新组件的state来更新对应界面显示(重新渲染组件)
注意:1)组件render中的this是组件实例对象
2)组件自定义的方法中的this为undefined,如何解决
a.强制绑定this:通过函数对象bind();
b.箭头函数(开发中使用箭头函数)
3)状态数据不能直接修改要使用setState方法
如下方代码
标准写法:
class Weather extrends React.Component{
//构造器 调用1次
constructor(props){
//放到最前方
super(props)
//初始化状态
this.state = {isHot:false,wind:'微风'}
//解决changeWeather中的this指向,并挂在在实例对象上
this.changeWeather = this.changeWeather.bind(this);
}
//调用1+n次,1是初始化的那次,n是状态更新的次数
render(){
//this为组件实例对象(即:Weather)
retrun <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热':'凉爽'}</h1>
}
//点几次调用几次
changeWeather(){
//changeWeather放到了Weather的原型对象上,供实例使用
//由于changeWeather作为onClick的回调,不是通过实例调用,是直接调用
//类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined
//获取原来isHot的值
const isHot = this.state.isHot
//严重注意:状态通过setState进行更新,且更新是一种合并不是替换
this.setState({isHot:!isHot})
//严重注意:状态(isHot)不能直接更改
//错误写法this.state.isHot = !isHot;
}
}
ReactDOM.render(<Weather/>,document.getElementById('test'));
精简写法:
//1.创建组件
class Weather extrends React.Component{
//初始化状态
state = {isHot:false,wind:'微风'}
render(){
retrun <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热':'凉爽'}</h1>
}
// 自定义方法----要用赋值语句的形式+箭头函数
// 箭头函数没有自身的this会自己找外层的this
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'));
10.2 props
理解:1)每个组件都会有props属性
2)组件标签的所有属性都保存在props中
做用:1)通过标签属性从组件外向组件内传递变化的数据
2)注意:组件内部不能修改props数据
如下方代码:
类式组件使用props:
复杂写法:
//1.创建组件
class Person extrends React.Component{
render(){
const {name,age,sex} = this.props
//props是只读的
retrun (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年级:{age+1}</li>
</ul>
)
}
}
//对标签属性进行类型,必要性的限制
Person.proTypes = {
name:ProTypes.string.isRequired, //限制name必传,且为字符窜
sex:ProTypes.string, //限制sex为字符串
age:ProTypes.number, //限制age为数值
speak:ProTypes.func, //限制speak为函数
}
//指定默认标签属性值
Person.defaultProps = {
sex:'男', //性别默认值为男
age:18,//性别默认值为18
}
//2.渲染组件到页面
ReactDOM.render(<Person name="lzq" speak={speak}/>,document.getElementById('test'));
精简写法:
//1.创建组件
class Person extrends React.Component{
//对标签属性进行类型,必要性的限制
static proTypes = {
name:ProTypes.string.isRequired, //限制name必传,且为字符窜
sex:ProTypes.string, //限制sex为字符串
age:ProTypes.number, //限制age为数值
speak:ProTypes.func, //限制speak为函数
}
//指定默认标签属性值
static defaultProps = {
sex:'男', //性别默认值为男
age:18,//性别默认值为18
}
render(){
const {name,age,sex} = this.props
//props是只读的
retrun (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年级:{age+1}</li>
</ul>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Person name="lzq" speak={speak}/>,document.getElementById('test'));
函数式组件使用props: //函数式组件没有state和refs,proTypes只能写在外侧
//1.创建组件
function Person(props){
const {name,sex,age} = props
retrun (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年级:{age}</li>
</ul>
)
}
//对标签属性进行类型,必要性的限制
Person.proTypes = {
name:ProTypes.string.isRequired, //限制name必传,且为字符窜
sex:ProTypes.string, //限制sex为字符串
age:ProTypes.number, //限制age为数值
speak:ProTypes.func, //限制speak为函数
}
//指定默认标签属性值
Person.defaultProps = {
sex:'男', //性别默认值为男
age:18,//性别默认值为18
}
//2.渲染组件到页面
ReactDOM.render(<Person name="lzq" sex='男' age={18}/>,document.getElementById('test'));
10.3 refs(请勿过度使用refs)
理解:组件内的标签可以定义ref属性来标记自己
10.3.1 字符串形式的ref(不建议使用)
//1.创建组件
class Demo extrends React.Component{
render(){
retrun (
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据">
<button onClick={this.showData1}>点击我提示左侧的数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据">
</div>
)
}
showData1 = ()=>{
const {input1} = this.refs
alter(input1.value)
}
showData2 = ()=>{
const {input2} = this.refs
alter(input2.value)
}
}
//2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'));
10.3.2 回调函数形式的ref
回调函数(1)你定义的函数 (2)你没调用 (3)最后别人调用了
render的return中写js代码{}
//1.创建组件
class Demo extrends React.Component{
showData1 = ()=>{
const {input1} = this
alter(input1.value)
}
showData2 = ()=>{
const {input2} = this
alter(input2.value)
}
saveInput = (c) => {
this.input1 = c
}
render(){
retrun (
<div>
{//注释后面代码:ref回调函数是内联式,在界面更新时执行两次,第一次传null,第二次传DOM元素}
<input ref={currentNode => this.input1 = currentNode} type="text" placeholder="点击按钮提示数据">
{//使用内联式不影响使用,可以使用class类绑定函数的方式避免,以后还是使用内联的比较多}
<input ref={this.saveInput} type="text" placeholder="点击按钮提示数据">
<button onClick={this.showData1}>点击我提示左侧的数据</button>
<input ref={c => this.input2 = c } onBlur={this.showData2} type="text" placeholder="失去焦点提示数据">
</div>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'));
10.3.3 createRef (目前react最推荐的形式)
//1.创建组件
class Demo extrends React.Component{
/*
React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点.该容器是'专人专用'的
*/
//创建ref容器
myRef = React.createRef()
myRef2 = React.createRef()
//展示左侧输入框的数据
showData1 = ()=>{
alter(this.myRef.current.value)
}
//展示右侧输入框的数据
showData2 = ()=>{
alter(this.myRef2.current.value)
}
render(){
retrun (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据">
<button onClick={this.showData1}>点击我提示左侧的数据</button>
<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据">
</div>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'));
12. react中的事件处理
(1)通过onXxx属性(如:onClick,onBlur等)指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件,而不是原生DOM事件(如:onClick是onclick重新封装的事件)---为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层元素) ---为了高效
(2)通过event.target得到发生事件DOM元素对象
当发生事件的DOM元素和操作的DOM元素是一个时候可以省略ref(如下面onBlur事件)
//1.创建组件
class Demo extrends React.Component{
/*
React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点.该容器是'专人专用'的
*/
//创建ref容器
myRef = React.createRef()
//展示左侧输入框的数据
showData1 = ()=>{
alter(this.myRef.current.value)
}
//展示右侧输入框的数据
showData2 = (event)=>{
alter(event.target.value)
}
render(){
retrun (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据">
<button onClick={this.showData1}>点击我提示左侧的数据</button>
<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据">
</div>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'));
13.收集表单数据
13.1 非受控组件(页面内所有输入类DOM现用现取)
//1.创建组件
class Login extrends React.Component{
handleSubmit = (event) => {
event.preventDefault() //阻止表单提交
const {username,password} = this
alter(`你输入的用户名是:$(username.value),你输入的密码是:$(password.value)`)
}
render(){
retrun (
<form onSubmit={this.handleSubmit}>
用户名:<input ref={c => this.username = c} type="text" name="username">
密码:<input ref={c => this.password = c} type="password" name="password">
<button>登录</button>
</form>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Login/>,document.getElementById('test'));
13.2 受控组件(页面内所有输入类的DOM,随着输入将状态维护在状态里面,需要用的时候从state中取出来)
//1.创建组件
class Login extrends React.Component{
//初始化状态
state = {
username:'',//用户名
password:'',//密码
}
//保存用户名到状态中
saveUsername = (event)=>{
this.setState({username:event.target.value})
}
//保存密码到状态中
savePassword = (event)=>{
this.setState({password:event.target.value})
}
//表单提交回调
handleSubmit = (event) => {
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alter(`你输入的用户名是:$(username),你输入的密码是:$(password)`)
}
render(){
retrun (
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveUsername} type="text" name="username">
密码:<input onChange={this.savePassword} type="password" name="password">
<button>登录</button>
</form>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Login/>,document.getElementById('test'));
14.高阶函数和函数的柯里化
/*高阶函数:如果一个函数符合下面规范中的任何一个,那该函数就是高阶函数
1.若A函数,接收的参数是一个函数,那该函数就可以称为高阶函数
2.若A函数调用的返回值依然是一个函数,,那该函数就可以称为高阶函数
常见高阶函数:Promise、setTimeout、arr.map()等等
函数的柯里化:通过函数调用继续返回函数的方式,实现多次接受参数最后统一处理的函数编码形式
*/
使用高阶函数和函数柯里化的写法:
//1.创建组件
class Login extrends React.Component{
//初始化状态
state = {
username:'',//用户名
password:'',//密码
}
//保存表单数据
saveFormData = (dataType)=>{
return (event) => {
this.setState({[dataType]:event.target.value})
}
}
//表单提交回调
handleSubmit = (event) => {
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alter(`你输入的用户名是:$(username),你输入的密码是:$(password)`)
}
render(){
retrun (
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveFormData('username')} type="text" name="username">
密码:<input onChange={this.saveFormData('password')} type="password" name="password">
<button>登录</button>
</form>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Login/>,document.getElementById('test'));
不使用函数柯里化的写法:
//1.创建组件
class Login extrends React.Component{
//初始化状态
state = {
username:'',//用户名
password:'',//密码
}
//保存表单数据
saveFormData = (dataType,event)=>{
this.setState({[dataType]:event.target.value})
}
//表单提交回调
handleSubmit = (event) => {
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alter(`你输入的用户名是:$(username),你输入的密码是:$(password)`)
}
render(){
retrun (
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={ event => this.saveFormData('username',event)} type="text" name="username">
密码:<input onChange={ event => this.saveFormData('password',event)} type="password" name="password">
<button>登录</button>
</form>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<Login/>,document.getElementById('test'));
14.react的生命周期
生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
14.1 生命周期(旧)
14.1.1 初始化阶段(挂载时)
①constructor() //构造器
②componentWillMount() //组件将要挂载
③render() //初始化渲染
④componentDidMount() //组件挂载完毕
14.1.2 更新阶段
setState() 更新
①shouldComponentUpdate() //控制组件更新的阀门
②componentWillUpdate() //组件将要更新
③render() //状态更新之后执行
④componentDidUpdate() //组件更新完毕
forceUpdate() 强制更新
①componentWillUpdate() //组件将要更新
②render() //状态更新之后执行
③componentDidUpdate() //组件更新完毕
父组件重新render触发
①componentWillReceiveProps() //组件将要接受新的props的钩子
②shouldComponentUpdate() //控制组件更新的阀门
③componentWillUpdate() //组件将要更新
④render() //状态更新之后执行
⑤componentDidUpdate() //组件更新完毕
14.1.3 卸载组件 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount() //组件将要卸载
14.2 生命周期(新)
新的和旧的相比
①新的可能弃用componentWillMount、componentWillUpdate、componentWillReceiveProps
不要使用,如果使用新版本需要在这三个前面加UNSAFE_ 如:UNSAFE_componentWillMount 不是不安全而是乱用容易出现bug
②新的新提出两个getDerivedStateFromProps和getSnapshotBeforeUpdate
getDerivedStateFromProps 当state的值在任何时候都取决于props,使用场景罕见
14.2.1 初始化阶段(挂载时)
①constructor() //构造器
②getDerivedStateFromProps()
③render() //初始化渲染
④componentDidMount() //组件挂载完毕 ----常用
一般在这个钩子中做一些初始化的事情,例如:开启定时器、发送网路请求、订阅消息
14.2.2 更新阶段
setState()和父组件重新render触发
①getDerivedStateFromProps() //衍生
①shouldComponentUpdate() //控制组件更新的阀门
③render() //状态更新之后执行
④getSnapshotBeforeUpdate() //在更新之前获取快照
④componentDidUpdate() //组件更新完毕
forceUpdate() 强制更新
①getDerivedStateFromProps() //衍生
②render() //状态更新之后执行
③getSnapshotBeforeUpdate() //在更新之前获取快照
④componentDidUpdate() //组件更新完毕
14.2.3 卸载组件 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount() //组件将要卸载 ----常用
一般在这个钩子中做一些收尾的事情,例如:关闭定时器、取消订阅消息
getSnapshotBeforeUpdate使用场景:
//1.创建组件
class NewsList extrends React.Component{
//初始化状态
state = {newsArr:[]}
componentDidMount(){
setInterval(()=>{
//获取原状态
const {newArr} = this.state
//模拟一条新闻
const news = '新闻' + (newArr.length+1)
},1000)
}
getSnapshotBeforeUpdate(){
return this.refs.list.scrollHeight
}
④componentDidUpdate(preProps,preState,height){
this.refs.list.scrollTop += this.refs.list.scrollHeight - height
}
render(){
retrun (
<div className="list" ref="list">
{
this.state.newArr.map((n,index)=>{
return <div key={index} className="news">{n}</div>
})
}
</div>
)
}
}
//2.渲染组件到页面
ReactDOM.render(<NewsList/>,document.getElementById('test'));
15.DOM的diffing算法
15.1 虚拟DOM中key的作用:
1)简单说:key是虚拟DOM的标识,在更新显示时key起着及其重要的作用
2)详细说:当前状态中的数据发生变化时,react会根据[新数据]生成[新的虚拟DOM],随后React进行[新虚拟DOM]与[旧虚拟DOM]的diff比较,比较规则如下:
a.旧虚拟DOM中找到了与新虚拟DOM相同的key:
(1)若虚拟DOM中内容没变,直接使用之前的真是DOM
(2)若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面之前的真实DOM
b.旧虚拟DOM中未找到与新虚拟DOM相同的key
根据数据创建新的真实DOM,随之渲染到界面
15.2 用index作为key可能会引发的问题:
1)若对数据进行:逆序添加、逆序删除等操作:
会产生没有必要的真实DOM更新 ==>界面效果没问题,但效率低了
2)如果结构中包含输入类DOM:
会产生错位DOM更新 ==>界面有问题
3)注意:如果不存在对数据的逆序添加,逆序删除等破坏顺序的操作,仅用于渲染列表用于展示,使用index作为key是没有问题的
15.3 开发中如何选择key?
1)最好使用每条数据的唯一标识作为key,比如id、手机号、省份证号等
2)如果确定只是简单的展示数据,用index也是可以的
16.父子组件之间的通信:
父组件给子组件传递数据:通过props
子组件给父组件传递数据:父组件给子组件传一个函数,当子组件要给父组件传东西的时候,通过props调用一下该函数
17.defaultChecked和checked的区别,defaultChecked只有在第一次指定的时候才起作用,以后不起作用
18.状态在哪里,操作状态的方法就在哪里
