IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 0913 NOTE -> 正文阅读

[JavaScript知识库]0913 NOTE

0913 NOTE

React是什么?

一个将数据渲染为HTML视图的js库

React的特点

1.采用组件化模式,声明式编码,提高开发效率及组件复用率

2.React Native中可以使用React语法进行移动端开发

3.虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互

React实现

数据=>虚拟DOM=>真实DOM

虚拟DOM的两种创建方式

1.js创建

React.createElement('h1',{id:"title"},React.createElement('span',{},"Hello React"))
ReactDOM.render(VDOM,document.getElementById('test'))

2.jsx创建

<script type="text/babel">/*必须加babel,用于将jsx翻译成js*/
	let VDOM = <h1 id="title"><span>Hello,React</span></h1>;	//不加引号,不是字符串
	ReactDOM.render(VDOM,document.getElementById('test'));
</script>

jsx出现的原因:解决虚拟DOm创建的繁琐问题,实际是原生js的语法糖

虚拟DOM与真实DOM

虚拟DOM:

? 1.本质是一般对象

? 2.虚拟DOM用于React内部,没有真实DOM那么多的属性

? 3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上

jsx语法规则

? jsx:javascript XML js扩展语法

? 语法规则:

? 1.定义虚拟DOM时,不写引号

? 2.标签中想借用js表达式调用变量时,用{}包含变量名

? 3.jsx中,样式类名指定用className而不是class

? 4.jsx中,内联样式需用双括号包裹对象而非字符串

? 5.虚拟DOM只允许有一个根标签

? 6.标签必须闭合

? 7.标签首字母:

? a.小写字母开头,则将该标签转为html中同名元素,若无对应html元素,报错

? b.大写字母开头,则react会去渲染对应组件,组件未定义则报错

组件与模块

模块:复用js,简化js编写,提高js运行效率

组件:服用代码,简化项目代码,提高运行效率

组件定义方式

函数式组件:

<script type="text/babel">
	function Demo(){
	return <h2>reacttest</h2>
}
ReactDOM.render(<Demo/>,document.qetElementById("test"))
</script>

步骤:

? 创建函数式组件:

? React解析组件标签→找到对应组件→发现组件由函数定义,调用该函数,将返回的虚拟DOM转为真实DOM,渲染呈现在页面中

function Demo(){
	return <h2>reacttest</h2>
}
ReactDOM.render(<Demo/>,document.qetElementById("test"))

//注意:组件,开头字母大写,否则会按照html标签解析,报错
//标签需要闭合

注:babel编译后js环境进入严格模式

类式组件:

类式组件创建必须继承react中的内置类React.Component

//创建类式组件
class MyTest extends React.Component{
    render(){
        return <h1><span>Hello,React</span></h1>
    }
}
 /*
 执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么?
					1.React解析组件标签,找到了MyComponent组件。
					2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
					3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。   
 */

复杂组件的定义:

? 与简单组件的区别→复杂组件有状态state

状态state是组件实例上的属性

初始化state:

class MyTest extends React.Component{
   constructor(props){
       super(props)
   }
   render(){
        return <h1><span>Hello,React</span></h1>
    }
}

react中的事件绑定的注意事项:

? 1.小驼峰命名,如onClick,不符合命名规则报错

? 2.行内属性实现事件监听时,通过花括号将事件函数传入,与原生js给入字符串,解析成函数不同,对比:οnclick=“clickHandler”||onClick={clickHandler}

? 3.类中方法默认开启了局部的严格模式,需要注意this指向问题

setState的使用

注意:状态不可直接更改,需要借助内置API:setState更改

//1.创建组件
		class Weather extends React.Component{
			
			//构造器调用几次? ———— 1次
			constructor(props){
				console.log('constructor');
				super(props)
				//初始化状态
				this.state = {isHot:false,wind:'微风'}
				//解决changeWeather中this指向问题
				this.changeWeather = this.changeWeather.bind(this)
			}

			//render调用几次? ———— 1+n次 1是初始化的那次 n是状态更新的次数
			render(){
				console.log('render');
				//读取状态
				const {isHot,wind} = this.state
				return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}{wind}</h1>
			}

			//changeWeather调用几次? ———— 点几次调几次
			changeWeather(){
				//changeWeather放在哪里? ———— Weather的原型对象上,供实例使用
				//由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用
				//类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined
				
				console.log('changeWeather');
				//获取原来的isHot值
				const isHot = this.state.isHot
				//注意:状态必须通过setState进行更新,且更新是一种合并,不是替换。
				this.setState({isHot:!isHot})
				console.log(this);

				//注意:状态(state)不可直接更改,下面这行就是直接更改!!!
				//this.state.isHot = !isHot //这是错误的写法
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<Weather/>,document.getElementById('test'))

state简写:

class MyTest extends React.Component {
            state = {isTrue:false};
            render() {
                let {isTrue} = this.state;
                return <h1><span onClick={this.changetalk}>你说的{isTrue ? "对" : "不对"}!</span></h1>
            };
            changetalk = ()=>{
                // console.log(this.state.isTrue);
                let isTrue = this.state.isTrue;
                this.setState({isTrue : !isTrue})
            }

        }
        ReactDOM.render(<MyTest />, document.getElementById("test"))

props属性

基本使用:

class Person extends React.Component {
            render() {
                let { pname, page, pgender } = this.props;
                return (
                    <ul>
                        <li>姓名:{pname}</li>
                        <li>性别:{pgender}</li>
                        <li>年龄:{page}</li>
                    </ul>
                )
            }
        }

ReactDOM.render(<Person pname="凯哥" pgender="男" page="18" />,document.getElementById("test1"))
ReactDOM.render(<Person pname="小胖砸" pgender="男" page="666" />,document.getElementById("test2"));
ReactDOM.render(<Person pname="小菜鸟" pgender="男" page="888" />,document.getElementById("test3"));

批量传递:

? 注意:

? 1.展开运算符…在react的babel标签中可以展开对象,但是仅适用于标签属性

? 2.props只读

//props批量传递
        class Person extends React.Component {
            render() {
                let { pname, page, pgender } = this.props;
                return (
                    <ul>
                        <li>姓名:{pname}</li>
                        <li>性别:{pgender}</li>
                        <li>年龄:{page+1}</li>
                    </ul>
                )
            }
        }
        //默认属性设置
        Person.defaultProps = {
            pgender:"小样,居然想性别保密?",
            page:999,
        }
        //属性值规范
        Person.propTypes = {
            pname:PropTypes.string.isRequired,
            pgender:PropTypes.string,
            page:PropTypes.number,
        }
        let kaige = {pname:"凯哥",pgender:"男",page:18};
        let xiaopang = {pname:"小胖砸",pgender:"男",page:666};
        let cainiao = {pname:"小菜鸟",pgender:"男",page:"888"};
        //展开运算符实现批量传递
        ReactDOM.render(<Person {...kaige} />, document.getElementById("test1"));
        ReactDOM.render(<Person {...xiaopang} />, document.getElementById("test2"));
        ReactDOM.render(<Person pname="小菜鸟" />, document.getElementById("test3"));

props简写:

//其实就是将静态属性封装进类,es5→es6

 //简写
        class Person extends React.Component {
            render() {
                let { pname, page, pgender } = this.props;
                return (
                    <ul>
                        <li>姓名:{pname}</li>
                        <li>性别:{pgender}</li>
                        <li>年龄:{page + 1}</li>
                    </ul>
                )
            }
            //默认属性设置
            static defaultProps = {
                pgender: "小样,居然想性别保密?",
                page: 999,
            }
            //属性值规范
            static propTypes = {
                pname: PropTypes.string.isRequired,
                pgender: PropTypes.string,
                page: PropTypes.number,
            }
        }

        let kaige = { pname: "凯哥", pgender: "男", page: 18 };
        let xiaopang = { pname: "小胖砸", pgender: "男", page: 666 };
        let cainiao = { pname: "小菜鸟", pgender: "男", page: "888" };
        //展开运算符实现批量传递
        ReactDOM.render(<Person {...kaige} />, document.getElementById("test1"));
        ReactDOM.render(<Person {...xiaopang} />, document.getElementById("test2"));
        ReactDOM.render(<Person pname="小菜鸟" />, document.getElementById("test3"));

类式组件中的构造函数与props

? 通常,在 React 中,构造函数仅用于以下两种情况:

? 1.通过给 this.state 赋值对象来初始化内部 state。

? 2.为事件处理函数绑定实例

? 在为 React.Component 子类实现构造函数时,应在其他语句之前前调用 super(props)。否则,this.props 在构造函数中可能会出现未定义的 bug。

函数式组件使用props

function Person(props) {
            let { pname, page, pgender } = props;
            return (
                <ul>
                    <li>姓名:{pname}</li>
                    <li>性别:{pgender}</li>
                    <li>年龄:{page + 1}</li>
                </ul>
            )
        }

        Person.defaultProps = {
            pgender: "小样,居然想性别保密?",
            page: 999,
        }

        Person.propTypes = {
            pname: PropTypes.string.isRequired,
            pgender: PropTypes.string,
            page: PropTypes.number,
        }

        let kaige = { pname: "凯哥", pgender: "男", page: 18 };
        let xiaopang = { pname: "小胖砸", pgender: "男", page: 666 };
        let cainiao = { pname: "小菜鸟", pgender: "男", page: 888 };
        ReactDOM.render(<Person {...kaige} />, document.getElementById("test1"));
        ReactDOM.render(<Person {...xiaopang} />, document.getElementById("test2"));
        ReactDOM.render(<Person {...cainiao} />, document.getElementById("test3"));

注意:函数式组件调用props属性没问题,但是无法调用state与refs,除非通过hooks

视频参考

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-14 13:14:30  更:2021-09-14 13:15:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 18:49:39-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码