国外做网站侵权,如何通过做网站挣钱,新手学做网站 pdf下载,上海注册公司注册资本Reat简介
React#xff1a;用于构建用户界面的 JavaScript 库。由 Facebook 开发且开源。是一个将视图渲染为html视图的开源库
第一章#xff1a;React入门
相关js库
react.development.js #xff1a;React 核心库react-dom.development.js #xff1a;提供 DOM 操作的…Reat简介
React用于构建用户界面的 JavaScript 库。由 Facebook 开发且开源。是一个将视图渲染为html视图的开源库
第一章React入门
相关js库
react.development.js React 核心库react-dom.development.js 提供 DOM 操作的 React 扩展库babel.min.js 解析 JSX 语法js语法糖转换为 JS 代码 !-- 准备好一个“容器” --div idtest/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/script!-- 此处一定要写babel表示写的不是 JS而是 JSX并且靠 babel 翻译 --script typetext/babel//1.创建虚拟DOM 此处是JSX 不要写引号因为不是字符串const VDOM h1Hello,React/h1//2.渲染虚拟DOM到页面// 导入核心库和扩展库后会有 React 和 ReactDOM 两个对象ReactDOM.render(VDOM, document.getElementById(test))/script创建VDOM的两种方式
第一种 jsx方式推荐. div idtest/divscript typetext/javascript src../js/react.development.js/scriptscript typetext/javascript src../js/react-dom.development.js/scriptscript typetext/javascript src../js/babel.min.js/scriptscript typetext/babel//1.创建虚拟DOM const VDOM (h1spanHello,React/span/h1)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))/script第二种原生js方式 div idtest/divscript typetext/javascript src../js/react.development.js/scriptscript typetext/javascript src../js/react-dom.development.js/script//原生js不用写babelscript typetext/javascript//1.创建虚拟DOMconst VDOM React.createElement(h1,{id:title},React.createElement(span,{},Hello,React))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))/scriptVDOM | DOM
关于虚拟 DOM
本质是 Object 类型的对象一般对象虚拟 DOM 比较“轻”真实 DOM 比较“重”因为虚拟 DOM 是 React 内部在用无需真实 DOM 上那么多的属性。虚拟 DOM 最终会被 React 转化为真实 DOM呈现在页面上。 script typetext/babel//1.创建虚拟DOM const VDOM (h1spanHello,React/span/h1)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))console.log(VDOM,VDOM); // VDOM {...}是一个对象console.log(TDOM,document.querySelect(#test)); // TDOM div.../div真实DOMconsole.log(typeof VDOM); // objectconsole.log(VDOM instanceof Object); // true/scriptReact JSX
全称JavaScript XMLReact 定义的类似于 XML 的 JS 扩展语法本质是 React.createElement() 方法的语法糖作用简化创建虚拟 DOM补充js中JSON的序列化和反序列化使用parse()/stringify()
JSX 语法规则
定义虚拟 DOM 时不要写引号标签中混入 JS 表达式需要使用 {}指定类名不用 class使用 className内联样式使用 style{{ key: value }} 的形式只能有一个根标签标签必须闭合单标签结尾必须添加 /input typetext /标签首字母小写则把标签转换为 HTML 对应的标签若没有则报错标签首字母大写则渲染对应组件若没有定义组件则报错
!DOCTYPE html
html langenheadmeta charsetUTF-8 /titlejsx语法规则/titlestyle.title {background-color: orange;width: 200px;}/style/headbodydiv idtest/div...script typetext/babelconst myId aTgUiGuconst myData HeLlo,rEaCtconst VDOM (divh2 classNametitle id{myId.toLowerCase()}span style{{ color: white, fontSize: 19px }}{myData.toLowerCase()}/span/h2input typetext /// goodvery good/good// Child/Child/div)ReactDOM.render(VDOM, document.getElementById(test))/script/body
/html补充表达式与语句代码的区别. 表达式一个表达式会产生一个值可以放在任何一个需要值的地方如数值处理等 aabdemo(1)arr.map() //可以遍历的时候使用function test () {}语句代码,下面这些都是语句如逻辑判断语句 if(){}for(){}switch(){case:xxxx}第二章React面向组件
创建组件的两种方式
函数式组件 div idapp/divscript typetext/javascript src../js/react.development.js/scriptscript typetext/javascript src../js/react-dom.development.js/scriptscript typetext/javascript src../js/babel.min.js/scriptscript typetext/babel// 创建函数式组件function Demo() {console.log(this) //babel编译后开启严格模式 此处的this是undefindreturn h1函数式组件,适用于简单组件的创建/h1}// 挂载组件ReactDOM.render(Demo/,document.querySelector(#app))/script要点
组件名称首字母必须大写否则会解析成普通标签导致报错JSX 语法规则函数需返回一个虚拟 DOM渲染组件时需要使用标签形式同时标签必须闭合
渲染组件的过程
1、React 解析标签寻找对应组件 2、发现组件是函数式组件则调用函数将返回的虚拟 DOM 转换为真实 DOM 并渲染到页面中
类式组件
类的基本知识 script typetext/javascript/*总结1. 类的实例不是必须写的需要对类进行初始化操作如添加指定属性时才写2. 子类继承父类子类中写了构造器那么子类构造器中的super是必须要调用的3. 类中定义的方法都是放在了类的原型对象上供实例去使用4. 实例调用子类的方法时找不到会去父类的原型对象上去找一直找到顶级window对象*/class Person {// 构造器方法constructor(name,age) {// 构造器中的this指向类的实例对象constructor是一个函数由实例对象调用所以this指向实例对象this.name namethis.age age}// 一般方法speak() {// 放在了类的原型对象上供实例使用// 通过Person实例调用speak方法时speak中的this指向Person实例console.log(我的名字叫${this.name},今年${this.age}岁了);}}// Student类继承与Person类class Student extends Person {constructor(name,age,id) {super(name,age)this.id id}// 重写从父类继承的方法speak() {console.log(我的名字叫${this.name},今年${this.age}岁了,编号为${this.id});}}const p1 new Person(张三,18)p1.speak()const s1 new Student(李四,16,30461)s1.speak()/script组件渲染过程
React 解析组件标签寻找组件发现是类式组件则 new 该类的实例对象通过实例调用原型上的 render 方法将 render 返回的虚拟 DOM 转为真实 DOM 渲染到页面上
//创建类式组件
class MyComponent extends React.Component {render() {return h2我是用类定义的组件/h2}}
//渲染组件到页面
ReactDOM.render(MyComponent/,document.getElementById(test))第三章: 组件实例的核心属性
核心属性1state | 状态
state 是组件实例对象最重要的属性值为对象。又称为状态机通过更新组件的 state 来更新对应的页面显示。
要点
初始化 stateReact 中事件绑定this 指向问题setState 修改 state 状态constructor 、render 、自定义方法的调用次数
标准写法 script typetext/babelclass Weather extends React.Component {//构造器调用1次constructor(props) {super(props) // 初始化状态this.state {isHot:true}// 解决changeWeather中的this指向问题this.change this.changeWeather.bind(this)}render() {//render调用n1次// 读取状态const {isHot} this.state // 这里的this指向原型对象// return h1 onClick{this.changeWeather}今天天气{isHot?凉爽:炎热}/h1// 这里的this指向实例自身return h1 onClick{this.change}今天天气{isHot ? 炎热 :凉爽 }/h1}changeWeather() {//点几次changeWeather调用几次// changeWeather放在实例对象的原型上供实例使用// changeWeather作为onClick的回调函数使用不是通过实例调用是直接调用// 类中的方法默认开启了严格模式this指向丢失// 状态不可直接更改必须借助React内置API// this.state.isHot !this.state.isHotthis.setState({isHot:!this.state.isHot})}}function demo() {// 修改状态}ReactDOM.render(Weather/,document.querySelector(#app))/script简写 script typetext/babel// 创建组件class Weather extends React.Component {// 初始化状态state {isHot:true}render() {// 读取状态const {isHot} this.state return h1 onClick{this.changeWeather}今天天气{isHot ? 炎热 :凉爽 }/h1}// 自定义方法 -- 赋值语句箭头函数中的this指向上下文中的thischangeWeather (){this.setState({isHot:!this.state.isHot})}}ReactDOM.render(Weather/,document.querySelector(#app))/script核心属性2props | 标签属性
每个组件对象都有 props 属性组件标签的属性都保存在 props 中。注意props 是只读的不能修改。
标准写法 script typetext/babel// 创建组件class Person extends React.Component {render() {const {name,age,sex} this.propsreturn (divh1{name}/h1h2{age}/h2h2{sex}/h2/div)}}// 渲染组件// ReactDOM.render(Person name张三 age18 sex1/,document.querySelector(#app))// 批量传递props/批量传递标签属性const obj {name:张三,age:18,sex:男}ReactDOM.render(Person {...obj}/,document.querySelector(#app))/script限制标签属性 在 React 15.5 以前React 身上有一个 PropTypes 属性可直接使用即 name:React.PropTypes.string.isRequired 没有把 PropTypes 单独封装为一个模块。 div idapp1/divdiv idapp2/divdiv idapp3/divscript typetext/javascript src../js/react.development.js/scriptscript typetext/javascript src../js/react-dom.development.js/scriptscript typetext/javascript src../js/babel.min.js/script!-- 引入prop-type 用于限制props属性标签 --script typetext/javascript src../js/prop-types.js/scriptscript typetext/babel// 假数据const obj {name:张三,age:18,sex:男}// 创建组件class Person extends React.Component {render() {const {name,age,sex} this.propsreturn (divspan{name}/spanspan{age}/spanspan{sex}/span/div)}}// 对标签属性进行限制Person.propTypes {name:PropTypes.string.isRequired,//限制name必传且为String类型age:PropTypes.number,//限制age为number类型sex:PropTypes.string,//限制sex为String类型speak:PropTypes.func//限制speak为函数类型}Person.defaultProps {age:18,//指定age默认值sex:保密//指定sex默认值}function speak() {console.log(hello);}// 渲染组件ReactDOM.render(Person name李四 age{20} sex男 speak{speak}/,document.querySelector(#app1))ReactDOM.render(Person name李五/,document.querySelector(#app3))// 批量传递props/批量传递标签属性ReactDOM.render(Person {...obj}/,document.querySelector(#app2))/script函数式组件使用props script typetext/babel// 假数据const obj {name:张三,age:18,sex:男}// 创建组件function Person(props) {const {name,age,sex} propsreturn (divh1{name}/h1h2{age}/h2h2{sex}/h2/div)}// 对标签属性进行限制Person.propTypes {name:PropTypes.string.isRequired,//限制name必传且为String类型age:PropTypes.number,//限制age为number类型sex:PropTypes.string,//限制sex为String类型speak:PropTypes.func//限制speak为函数类型}Person.defaultProps {age:18,//指定age默认值sex:保密//指定sex默认值}ReactDOM.render(Person {...obj}/,document.querySelector(#app2))/script简写形式 !-- 引入prop-type 用于限制props属性标签 --script typetext/javascript src../js/prop-types.js/scriptscript typetext/babel// 假数据const obj {name:张三,age:18,sex:男}// 创建组件class Person extends React.Component {render() {const {name,age,sex} this.propsreturn (divspan{name}/spanspan{age}/spanspan{sex}/span/div)}// 对标签属性进行限制static propTypes {name:PropTypes.string.isRequired,//限制name必传且为String类型age:PropTypes.number,//限制age为number类型sex:PropTypes.string,//限制sex为String类型speak:PropTypes.func//限制speak为函数类型}static defaultProps {age:18,//指定age默认值sex:保密//指定sex默认值}}function speak() {console.log(hello);}// 渲染组件ReactDOM.render(Person name李四 age{20} sex男 speak{speak}/,document.querySelector(#app1))ReactDOM.render(Person name李五/,document.querySelector(#app3))// 批量传递props/批量传递标签属性ReactDOM.render(Person {...obj}/,document.querySelector(#app2))/script核心属性3refs | 标识符
通过定义 ref 属性可以给标签添加标识。
1、字符串形式的ref这种形式已过时效率不高官方不建议使用。
script typetext/babelclass Demo extends React.Component {showData (){const {input1,innput2} this.refsconsole.log(input1);}render() {return (divinput refinput1 typetext/br/br/button onClick{this.showData}点击确认文字/buttoninput refinput2 typetext//div)}}ReactDOM.render(Demo/,document.querySelector(#app))/script2、回调函数形式的ref便捷 使用最多 要点
currentNode this.input1 currentNode 就是给组件实例添加 input1 属性值为节点由于是箭头函数因此 this 是 render 函数里的 this 即组件实例回调ref中调用次数问题原文如果 ref 回调函数是以内联函数的方式定义的在更新过程中它会被执行两次第一次传入参数null然后第二次会传入参数 DOM 元素。见官方文档 script typetext/babelclass Demo extends React.Component {showData (){const {input1,input2} thisconsole.log(input1);}render() {return (divinput ref{(currentNode) {this.input1currentNode}} typetext/br/br/button onClick{this.showData}点击确认文字/buttoninput refinput2 typetext//div)}}ReactDOM.render(Demo/,document.querySelector(#app))/script3、createRef API官方推荐使用 该方式通过调用 React.createRef 返回一个容器对象用于存储节点且一个容器只能存储一个节点。 script typetext/babelclass Demo extends React.Component {myRef React.createRef()myRef2 React.createRef()showData (){console.log(this.myRef);//{current: input}alert(this.myRef.current.value)}render() {return (divinput ref{this.myRef} typetext/input ref{this.myRef2} typetext///测试的没加事件br/br/button onClick{this.showData}点击确认文字/button/div)}}ReactDOM.render(Demo/,document.querySelector(#app))/script事件处理
React 使用自定义事件而非原生 DOM 事件即 onClick、onBlur 为了更好的兼容性React 的事件通过事件委托方式进行处理为了高效通过 event.target 可获取触发事件的 DOM 元素勿过度使用 ref 当触发事件的元素和需要操作的元素为同一个时可以不使用ref
class Demo extends React.Component {showData2 (event) {alert(event.target.value)}render() {return (divinput onBlur{this.showData2} typetext placeholder失去焦点提示数据 /nbsp;/div)}
}受控组件非受控组件
非受控组件现用现取。即需要使用时再获取节点得到数据 受控组件类似于 Vue 双向绑定的从视图层绑定到数据层(推荐使用因为非受控组件需要使用大量的 ref 。) script typetext/babelclass Demo extends React.Component {handleSubmit (event) {event.preventDefault() //阻止表单默认提交const {username,password} thisalert(${username.value},${password.value})}render() {return (form action onSubmit{this.handleSubmit}用户名input ref{c this.username c} typetext/密码 input ref{c this.password c} typepassword/button登录/button/form)}}ReactDOM.render(Demo/,document.querySelector(#app))/script受控组件
script typetext/babelclass Demo extends React.Component {state {username:1,password:2}saveUsername (event){this.setState({username:event.target.value})}savePassword (event){this.setState({password:event.target.value})}handleSubmit (event) {event.preventDefault() //阻止表单默认提交const {username,password} this.statealert(${username},${password})}render() {return (form action onSubmit{this.handleSubmit}用户名input onChange {this.saveUsername} typetext/密码 input onChange {this.savePassword} typepassword/button登录/button/form)}}ReactDOM.render(Demo/,document.querySelector(#app))/script补充高阶函数函数柯里化
**高阶函数**参数为函数或者返回一个函数的函数常见的如 Promise、setTimeout、Array.map()等 函数柯里化通过函数调用继续返回函数的方式实现多次接收参数最后统一处理的函数编码形式 使用高阶函数简化受控组件 script typetext/babelclass Demo extends React.Component {// 初始化statestate {username:1,password:2}// 自定义事件saveFormData (dateType){return (event) {this.setState({[dateType]:event.target.value})}}handleSubmit (event) {event.preventDefault() //阻止表单默认提交const {username,password} this.statealert(${username},${password})}render() {return (form action onSubmit{this.handleSubmit}用户名input onChange {this.saveFormData(username)} typetext/密码 input onChange {this.saveFormData(password)} typepassword/button登录/button/form)}}// 渲染组件ReactDOM.render(Demo/,document.querySelector(#app))/script第四章: 生命周期新 1、初始化阶段
由ReactDOM.render()触发 —— 初次渲染
constructor() —— 类组件中的构造函数static getDerivedStateFromProps(props, state) 从props得到一个派生的状态【新增】即state的值在任何时候都取决于propsrender() —— 挂载组件componentDidMount() —— 组件挂载完成 比较常用
2、更新阶段
由组件内部this.setSate()或父组件重新render触发或强制更新forceUpdate()
getDerivedStateFromProps() —— 从props得到一个派生的状态 【新增】shouldComponentUpdate() —— 组件是否应该被更新默认返回truerender() —— 挂载组件getSnapshotBeforeUpdate() —— 在更新之前获取快照【新增】就是捕捉更新前的状态componentDidUpdate(prevProps, prevState, snapshotValue) —— 组件完成更新
3、卸载组件
由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount() —— 组件即将卸载
** script typetext/babelclass Demo extends React.Component {state {newsArr:[]}componentDidMount() {setInterval(() {// 获取状态let {newsArr} this.stateconst news 列表(newsArr.length1)// 更新状态this.setState({newsArr:[news,...newsArr]})}, 1000);}getSnapshotBeforeUpdate() {return this.refs.list.scrollHeight}componentDidUpdate(preProps,preState,height) {this.refs.list.scrollTop this.refs.list.scrollHeight - height}render() {return (divul classNamelist reflist{this.state.newsArr.map((n,index) {return li key{index} classNamenews{n}/li})} /ul/div)}}ReactDOM.render(Demo/,document.querySelector(#app))/script**
