网站制作哪家大,乐华网络公司服务内容,icp主体备案号 网站备案号,seo关键词排名优化矩阵系统改变this指向的几种方式#xff1a; //1.使用箭头函数代替原始函数写法#xff1a;getState(){}//2.在函数调用时给函数名加bind(this)方法#xff1a;(bind中第一个参数表示修改this指向、第二个参数开始是用来传递数据的)onClick{this.getProps.bind(this,this.datas)…改变this指向的几种方式 //1.使用箭头函数代替原始函数写法getState(){}//2.在函数调用时给函数名加bind(this)方法(bind中第一个参数表示修改this指向、第二个参数开始是用来传递数据的)onClick{this.getProps.bind(this,this.datas)}//3.在构造函数constructor中通过this.函数名.bind(this,data)的方式修改this指向//4.调用时使用箭头函数onClick{(){this.getChange(datas)}}实现数据双向绑定
React中默认是不能实现数据双向绑定的也就是说react只支持将数据从state中传递到页面上页面上的数据不能传递到state中但是可以通过value事件和onChange事件实现数据双向绑定的效果如 class Header extends React.Component { constructor(props){super(props)this.state{messages:hello}}render() { return (divinput typetext value{this.State.messages} readOnly/{/*注意:当只提供value属性时会渲染一个只读的控件此时若修改控件会报警告若不想报警告那么就的加readOnly属性*/}input typetext refinp value{this.State.messages} onChange{changeData}/{/*当value属性和onChange事件同时使用时可使用逻辑实现数据双向绑定*/}/div)}// 实现数据双向绑定的逻辑changeData(){this.setState({// 获取input中文本的方式// 1.原生DOM的方式getElementById(input).value// 2.使用refs获取ref设置元素的方式this.refs.inp.value// 3.使用事件对象的方式e.target.valuemessages:this.refs.inp.value})}}; 父组件向子组件传递数据 // 1.传统父组件向子组件传入数据的方式一层一层的往下传// 最外层组件Boxo:export default class Boxo extends React.Component { constructor(props){super(props)this.state{colors:yellow}}render() { return (divBoxt colorboxt{this.state.colors}/{/*1.将最外层组件的colors属性值传给中间组件*/}span最外层组件/span/div)}}; // 中间组件Boxt:class Boxt extends React.Component { render() { return (divBoxth colorboxth{this.props.colorboxt}/{/*2.最外层传递数据是用props的方式传递的所以这里通过this.props的方式获取数据并以props的方式传递给最里层的组件*/}span中间组件/span/div)}}; // 最里层组件Boxth: class Boxth extends React.Component { render() { return (divspan style{{color:this.props.colorboxth}}最里层组件/span{/*3.在最里层组件中通过this.props的方式获取数据*/}/div)}}; // 2.通过context的方式传递数据最外层组件声明一次所有子组件可直接获取// 最外层组件Boxo:import ReactTypes from prop-types;export default class Boxo extends React.Component { constructor(props){super(props)this.state{colors:yellow}}getChildContext(){//1.在最外层组件中调用固定方法getChildContext此方法返回一个对象对象中的属性就是要传递的数据return {colorboxo:this.state.colors}}// 2.使用static childContextTypes{}固定写法规定colorboxo数据的类型记得引入prop-type包static childContextTypes {colorboxo:ReactTypes.string}render() { return (divBoxt /span最外层组件/span/div)}}; // 中间组件Boxt:class Boxt extends React.Component { render() { return (divBoxth /span中间组件/span/div)}}; // 最里层组件Boxth: class Boxth extends React.Component { static childContextTypes {//3.在子组件中继续做数据类型校验校验完就可以直接使用了colorboxo:ReactTypes.string}render() { return (divspan style{{color:this.context.colorboxo}}最里层组件/span{/*4.通过this.context.属性名获取数据*/}/div)}}; //3.新版React中Context的使用步骤var Colors React.createContext(blue);//1.使用React的createContext方法创建一个可被深入传递的对象括号中为默认值// 最外面的子组件export default class Boxo extends React.Component { render() { return (Colors.Provider valueyellow{/*2.Colors对象使用Provider将当前的值传递给一下的组价下面任何组件都能拿到该值在这里将yellow做为新值传递下去*/}Boxt/span最外面的组件/span/Colors.Provider)}}; // 中间组件Boxt:class Boxt extends React.Component { render() { return (divBoxth /span中间组件/span/div)}}; // 最里层组件Boxth: class Boxth extends React.Component { static contextType Colors;//3.在子组件中使用 static contextType接收对象render() { return (divspan style{{color:this.context}}最里层组件/span{/*4.通过this.context拿到从里向外最近的Provider的值这里值为yellow*/}/div)}};
JSX中的循环:
JSX中是不能写循环的但是可以将循环的元素存到数组中在JSX中数组是直接被展开的,如 // 遍历的方式输出10个li元素:var lis [];for(var i 0;i 10; i){var lie p key{i}hello/p;{/* 旧版JSX中当遍历的元素相同时会有报错此时应该给循环元素中加key{i}确保每项不同新版中不会报错 */}lis.push(lie);}const elements divul{lis}/ul/divconst box document.getElementById(box);ReactDOM.render(elements,box);//当然上面只是一种方式常用的方式如下class Header extends React.Component { constructor(){this.state.datas[{id:1,names:jack},{id:2,names:honest},{id:3,names:luck}]}render() {return (div{/*利用map拿到数据通过{数据} 的方式渲染*/}{this.state.datas.map(item{returnspan{item.names}/span})}/div)}}; ReactDOM.render(Header namesjack/, document.getElementById(box));React中样式
在React中使用样式修饰元素有两种方式如 //1.外链式推荐,但是需要优化看注意import ./css/main.css;//导入普通css样式文件span classNamecolorshello/span//使用className定义类名使用外链式中的类样式//2.行内式span style{{color:yellow,fontSize:18px}}hello/span//行内式中style接一对{}表示js语法里面的{}表示属性对象这个对象可以提到外部且属性采用驼峰命名法属性值要使用引号包裹属性值单位为px时可以省略单位和引号//注意因为上面外链式样式是全局的样式之间会冲突但是React中没有像vue中scoped一样的指令当然也是有办法的(css模块化使类样式私有)//1.使用模块化导入css样式文件:import mainStyle from ./css/main.css ;不能直接import ./css/main.css的方式导入//2.修改webpack.config.js文件中处理css文件的css-loader为css-loader?moduleslocalIdentName[name]_[local]-[hash:6] 即,加参数//3.通过mainStyle.类名 拿到具体的类样式如span classNmae{mainStyle.colors}hello/span//4.有时候可能会将私有的类暴露为全局的类此时只需要在css文件中将某类名通过:global{.类名}包裹如:global{.box}{width:100px;height:200px;border:1px solid;}//若同时想要私有和公有那么就的使用两个类样式公有和私有路由
React在5.2.0版本中提供了两套路由模块WEB版和 NATIVE版。做网站选择web版(npm install react-router-dom)做移动App选择native版(npm install react-router-native)这里选择web形式进行介绍 // 1.终端键入npm install react-router-dom --save 安装路由// 2.按需导入模块HashRouter(路由容器包裹所有路由相关的东西只需用一次)、Route(路由规则)、Link(路由链接)import {HashRouter,Route,Link} from react-router-dom;import Homeone from ./components/homeone.jsimport Hometwo from ./components/hometwo.jsimport Homethree from ./components/homethree.jsexport default class App extends React.Component{constructor(props){super(props)this.state{}}render(){//1.hashRouter容器里面只能有一个根节点此容器包裹路由return HashRouterdivdiv{/*2.Link类似vue中router-link*/}Link to/homeone页面一/LinkLink to/hometwo页面二/LinkLink to/homethree/fun/53页面三/Link{/* 这里传递的fun和53可以在组件中通过this.props.match.params.type(or id)拿到 */}/divdiv{/*3.Route用来处理路由的规则并做元素占位vue中router-view,因此Route可放在不同的结构中path匹配路由component匹配渲染的组件*/}Route path/homeone component{Homeone}/RouteRoute path/hometwo component{Hometwo}/RouteRoute path/homethree/:type/:id component{Homethree} exact/Route{/*react中路由默认是不严格配置也就是说只要Link中路由字符中包含path中字符则可匹配若要开启严格匹配模式在Route中加exact即可*/}{/* 如果想要严格匹配且参数变化时可以通过 /:type/:id 传递参数的形式匹配Link*/}/div/div/HashRouter}}JSX独立文件
react中jsx文件可以独立存在使用时在html文件引入即可如 //1.以下是JSX文件代码(实际就是js文件,这里命名为testjsx.js)如const box document.getElementById(box)var content(div{/*JSX中可以使用js表达式,如运算三元表达式变量等*/}h1{11}/h1{/*允许数组出现在JSX中此时数组会自动展开所有项如*/}div{[1,2,hello]}/div/div{/*建议将内容用小括号包裹起来这样即使换行之类也不会影响*/});ReactDOM.render(content,box);//2.在html文件中引入以上文件bodydiv idbox/divscript typetext/babel srctestjsx.js/script/body其他方式使用React依赖资源
除导入模块的方式引用资源外还有一些方式引入资源如
引用CDN资源启动React !DOCTYPE htmlhtmlheadmeta charsetUTF-8 /title/titlescript srchttps://cdn.staticfile.org/react/16.4.0/umd/react.development.js/script!--React核心库--script srchttps://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js/script!--提供与DOM相关功能的库--script srchttps://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js/script!--用来编译JSX代码将ES6转化为ES5生产环境不建议使用--/headbodydiv idbox/divscript typetext/babel//这里typetext/babel表示使用为JSXvar box document.getElementById(box); ReactDOM.render(pHello/p, box);//ReactDOM.render(content.element)方法将content内容渲染到element元素上即ReactDOM可以将浏览器DOM和React元素保持一致。/script/body/html安装React相关资源引入启动React 1.新建一个文件夹这里命名为reacttest,并在此文件夹下进入命令行2.命令键入npm i babel-standalone react react-dom --save 安装babel-standalone、react、react-dom3.在reacttest文件夹中新建test.html文件代码入下!DOCTYPE htmlhtml langenheadmeta charsetUTF-8title/titlescript srcnode_modules/babel-standalone/babel.min.js/scriptscript srcnode_modules/react/umd/react.development.js/scriptscript srcnode_modules/react-dom/umd/react-dom.development.js/script/headbodydiv idbox/divscript typetext/babelconst box document.getElementById(box);ReactDOM.render(pHello/p,box)/script/body/html4.在浏览器打开test.html文件如果看到hello,则表示成功。通过create-react-app启动React
create-react-app类似于vue中vue-cli,是快速搭建React项目环境的脚手架工具具体使用如下 1.新建一个文件夹这里命名为createreactapp随便找个文件打开终端即可这里并非项目文件夹并进入终端2.终端输入cnpm install create-react-app -g 全局安装create-react-app脚手架工具3.终端继续输入npx create-react-app test 创建一个名为test的react项目文件夹npx不是拼写错误它是npm5.2附带的package运行工具4.终端继续输入cd test 切换到test目录下5.终端继续输入: npm start 启动项目此时在浏览器输入:http://localhost:3000此时就会看到react页面7.在src目录下App.js中reader()括号中的内容将被显示在浏览器中实际开发中可以修改reader括号中的内容来达到项目的要求。8.打生产环境的包,终端输入npm run build ,同时build后的项目需要在服务器下才能访问否则打开的将是空白页面执行该命令前需要在 package.json 中新增条配置homepage: .9.将打包好的build文件夹中的内容全部复制部署到服务器上测试可以使用Apache本地服务器打开通过访问服务器地址即可看到react项目。更新元素渲染
React 元素都是不可变的想要改变DOM就要创建新的元素并通过ReactDOM.render()重新渲染值得注意的是 ReactDOM 首先会比较元素内容先后的不同而在渲染过程中只会更新改变的部分。
事件处理
React 元素的事件处理和 DOM 元素类似区别react中事件采用驼峰命名法、不能使用return false阻止默认行为必须通过事件对象e.preventDefault()阻止默认行为如 button onClick{actions}function actions(e){e.preventDefault();console.log(hello);}获取数据
在React中可以使用es6中fetch来获取数据它是基于Promise封装的但是它不能跨域请求具体用法如 fetch(url)//fetch可异步请求数据括号里面传入接口地址后面then表示请求成功里面接收一个回调函数得到response对象这里不能拿到数据.then(response{// console.log(response);return response.json()//response.json()可以拿到数据这里return出去通过第二个then()拿到处理}).then(datas{console.log(datas);})通过fetch-jsonp跨域请求数据
fetch-json是一个第三方包用来做跨域请求数据具体用法如下 //1.终端键入npm install fetch-jsonp --save 下载fetch-jsonp//2.导入fetch-jsonp包import fetchJSONP from fetch-jsonp//3.使用fetch-jsonp获取数据用法和fetch一样fetchJSONP(url).then(response{return response.json()}).then(datas{console.log(datas);})文档推荐
上面只是简单介绍React想要了解更多可阅读相关中文文档https://react.docschina.org/docs/forms.html
Ant Design:
在React UI开发中推荐使用Ant Design,使用时阅读官方文档即可。
一款UI设计语言多为react服务了解更多请阅读相关文档https://ant.design/index-cn
electronjs:
使用 JavaScriptHTML 和 CSS 构建跨平台的桌面应用程序电脑端框架。了解更多阅读官方文档https://www.electronjs.org/
提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者删除。 笔者苦海
