郑州专业网站制作服务报价,网络运营工程师,网站建设风格,wordpress设置谷歌验证1#xff0c;了解react
react并不是一个MVC框架#xff0c;他只是一个很强大的javaScript库#xff0c;主要作用是用来构建UI界面。
react的核心是封装一个个大大小小的组件#xff08;小到一个按钮#xff0c;大到一个页面#xff09;来构建复杂的UI界面#xff0c;每…1了解react
react并不是一个MVC框架他只是一个很强大的javaScript库主要作用是用来构建UI界面。
react的核心是封装一个个大大小小的组件小到一个按钮大到一个页面来构建复杂的UI界面每个组件都是UI的一部分。
react的组件就是返回标签的javaScript函数。例如
function MyButton() { return ( buttonIm a button/button );
} 2react特点
速度快 - react使用虚拟DOM跨浏览器兼容 - 因为虚拟DOM提供了标准的API解决了不同浏览器的语法不同问题组件化 - 将每个模块都抽成组件提升了可维护性单向数据流 - 数据对应DOM树从上到下流动数据流更清晰组件的状态就更可控纯粹的javaScript语法 - 没有react的单独语法因此在react中一些皆js 3react组件
3.1 了解组件
从以上概念可知react组件就是一部分的js逻辑封装的独立的可复用的代码片段这样每个片段都可以进行独立的管理很好的实现了代码的复用。
注意组件的首字母必须要大写 3.2 组件分类
函数function组件
函数式组件其实就是官网的标准案例定义一个函数接受任意的props参数函数中返回jsx语法的页面UI内容。
示例
export default function MyApp() { return ( div h1Welcome to my app/h1 MyButton / /div );
}类class组件
通过声明ES6中的类class来定义一个React组件。其中必须要继承React.Component类或React.PureComponent类类中必须要定义一个名为render的函数该函数的返回值是JSX语法编写的React元素。
class组件不同于函数组件的是class组件会创建对应的实例因此只有class组件才有生命周期 注意 类的内部默认会有个props属性继承自Component可以直接使用在类的构造函数constructor中通过this.props访问属性值是获取不到的因为这时props还没有挂载到this.props上等到constructor执行完成之后才会挂载除非把外面传进来的props传递给constructor中的父类构造函数super从而实现this.props的挂载类组件是动态组件基于数据驱动视图渲染 示例
// 创建一个类式组件
import React from react
class Mycomponent extends React.Component { constructor(props){ super(props) }render(){ return( divhello Mycomponent!/div ) }
}
export default Mycomponent // 渲染到页面中的指定DOM
// ReactDOM.render(虚拟DOM真实DOM)
ReactDOM.render(MyComponent /, document.getElementById(test))
let c new MyComponent() 3.3 组件数据传递
如果想传递数据给子组件可通过props方式
1在引用组件的标签处通过 props属性名{属性值} 的方式来设置传入的props
2在子组件入参处通过解构的方式获取props
示例
function MyApp() {// 传递给MyLabel组件两个propsinfo和heightreturn (MyLabelinfo{{ name: 张三, id: 123 }}height{100}/);
}// MyLabel组件可以获取传入的props
function MyLabel({info, height}) {// ... ...
}4了解JSX语法
概念JSXJavaScript XML首先被应用在react中他是一种javaScript语法的扩展比较类似于模板语言。他最终产生的是js对象既不是字符串不要加引号也不是html/xml标签。 作用用来简化创建虚拟DOM使代码更简洁更容易维护。 需要注意的规则
标签首字母小写则会被转换成html的同名元素如果html没有这个元素就报错标签首字母大写则react就会渲染对应的组件如果没有定义该组件就报错标签属性没有引号通常使用大扩号{}表示大括号内可以使用js表达式 egconst myId 123; h1 id{myId}Hello,/h1
内联样式style{{key:value}}有两个大括号第一个括号表示里面是一个js表达式第二个括号表示里面是一个键值对egspan style{{color:#e0e0e0, fontSize:18}}内容/span虚拟DOM只能有一个根标签属性使用小驼峰形式写法egfont-size写成fontSize必须闭合标签与js的对象不同js对象放在不同的地方创建是不同的引用并不恒等于。但是只要JSX的返回值一样就是相等。
参考JSX基本语法规则
HTML转换JSX的辅助工具HTML to JSX 5条件渲染
在React使用的JSX语法中同样支持与js相同的条件渲染if else、三目运算? :、语法等。 其中运算符的使用及其注意事项
运算符作用是左侧为true时渲染右侧JSX否则不渲染。
其中左侧不能是数字只能是布尔值。例如假设count为数字表达式要写count 0 span而不能写count span 6列表渲染
在React使用的JSX语法中列表渲染通常是使用map方法遍历和filter方法过滤。 map()方法使用注意
直接放在 map() 方法里的 JSX 元素一般都需要指定全局唯一的key值。目的为了让react能够精准定位到每个元素同时其后续发生了变化可以高效准确的更新DOM树。 所以不要设置index索引不要设置random随机数因为随机数会导致每次重新渲染都会重新创建DOM。 7更新界面useState和HOOK
useState使用 1引入useStateimport { useState } from react; 2自定义state变量和set方法const [sth, setSth] useState(initialValue) 3使用通过sth直接取值通过setSth(value)更新值 HOOK理解 以useXXX开头的函数被称为HOOKReact内置了很多的HOOK供用户使用useState就是其中一种。其他的还有useContext读取和订阅组件中的context、useRef帮助引用一个不需要渲染的值等。具体可查看官方API 同时React支持自定义HOOK。 HOOK的调用说明
HOOK的要求比较严格必须在组件顶层调用如果想在一个循环或者条件逻辑中调用只能再抽一个子组件放在顶层调用。 8ref的使用
ref概念组件内的标签可以定义ref属性来标识自己。 ref的应用 1字符串已废弃最早的用法。就是和vue的ref一样使用ref在节点上定义后通过this.refs[refName]来引用真实的dom节点。
input refinputRef / // this.refs[inputRef]来访问 2回调形式的ref就是在dom节点或组件上挂载函数函数的入参是dom节点或组件实例达到的效果和字符串一致获取当前节点的引用。
input ref{(input){this.inputValue input}} typetext/ 3通过React.createRef()方法createRef()方法创建一个ref容器将其赋值给一个变量。
class Child extends React.Component{constructor(props){super(props);this.myRef React.createRef(); // 创建ref容器并赋值给myRef}componentDidMount(){console.log(this.myRef.current);}render(){// dom的ref参数引用myRef的值return input ref{this.myRef}/}
} 9开发者工具react-devtools
开发阶段的辅助工具更方便的查看react组件可以在浏览器的F12中辅助使用。
可参考官网使用npm安装也可以参考此教程使用 10更多
开源的组件库
Ant Design - 一套企业级 UI 设计语言和 React 组件库基于 Ant Design 设计体系的 React UI 组件库用于研发企业级中后台产品。https://ant.design/index-cn
开发框架
Next.js - React 应用开发框架 | Next.js中文网Next.js 支持规模化的生产级 React 应用程序。大量世界领先的公司都在使用 Next.js 来构建静态和动态网站及 web 应用。https://www.nextjs.cn/
官网详细文档
快速入门 – React 中文文档https://react.docschina.org/learn
