网站横幅图片,网页设计怎么创建站点,中企动力做网站费用,做网站多少钱西宁君博示范在第二篇文章 《新型前端开发方式》 中有说到 React 有很爽的一点就是给我们一种创造 HTML 标签的能力#xff0c;那么今天这篇文章就详细讲解下 React 是如何提供这种能力的#xff0c;作为前端开发者如何来运用这种能力。 在第三篇文章 《JavaScript代码里写HTML一样可以很… 在第二篇文章 《新型前端开发方式》 中有说到 React 有很爽的一点就是给我们一种创造 HTML 标签的能力那么今天这篇文章就详细讲解下 React 是如何提供这种能力的作为前端开发者如何来运用这种能力。 在第三篇文章 《JavaScript代码里写HTML一样可以很优雅》 中介绍了 JavaScript 的扩展语法 JSX相信大家已经知道了所谓的创造新的 HTML 的能力其实就是以极其类似 HTML 的 JSX 语法来使用基于 React 编写的视图层组件。所以说要完成今天的任务我们只需要搞清楚一个问题即可如何基于 React 编写视图层组件。 内容摘要 定义组件两种方式类继承组件、函数式组件。类继承组件有更丰富的特性函数式组件书写更简洁执行效率更高。组件名称首字母要大写。属性是一个组件的外部输入。属性值可以通过 {} 设置任意的 JS 表达式。属性是只读的。属性可以设置默认值。属性可以设置类型开发阶段 React 会对属性进行类型检查。为组件所有属性设置类型检查是个好习惯有助于协作开发。通过内容摘要可以让你快速了解本文内容是否对你有用从而决定是否继续阅读节省你的时间也是一件很有意义的事情。 定义组件的几种姿势 下面介绍一下在 React 中定义组件的几种方式。 1. 类继承 有过 Java 等面向对象开发经验的同学一定很容易接受这种方式。ES6 为 JavaScript 增加了类和类继承的特性。子类会继承父类的“基因”成员方法、属性如果父类是一个组件那子类自然而然也是一个组件。 React 提供了 Component 和 PureComponent 两个父类他们之间有一点点区别我们在之后的文章中会详细介绍现在你可以将他们同等看待暂且无须理会。 通过继承自 React 提供的组件基类我们可以这样来创建一个组件 import React, {Component} from react;class HelloMessage extends Component {render() {return divHello world./div;}
} 通过类继承的方式创建一个组件就是这么简单只要继承 Component 基类并实现 render 方法即可。然后就可以把 HelloMessage 当成一个新的“HTML 标签”来用了如下你可以把它渲染到页面上 ReactDOM.render(HelloMessage /, document.querySelector(#root)); 你也可以用它来装配其它组件如 import React, {Component} from react;class HelloMessageList extends React.Component {render() {return (divHelloMessage /HelloMessage /HelloMessage //div)}
} 当然例子没有任何实际意义只是为了演示组件的定义及其用法。 演示代码https://codepen.io/Sarike/pen... 2. 函数式组件 顾名思义函数式组件就是以函数的形式来定义一个组件如下所示 import React from react;function HelloMessage() {return divHello world./div;
}// 或者const HelloMessage () divHello world./div; 实际上就是只实现了类继承方式中的 render 方法。 示例代码https://codepen.io/Sarike/pen... 类继承 vs 函数式组件 这两种定义组件的方式在实际的开发中都经常会被用到对大部分人来说类继承的方式用得频率会更高一些。 类继承的方式相较于函数式组件虽然写起来略繁琐但是它拥有更多的特性 内部状态state 生命周期函数函数式组件虽然没有 state 和生命周期函数等特性但是它有更简洁的书写方式另外还有更好的性能不用处理一些复杂的特性执行效率当然高了。 现在你可以无需关心 state 和生命周期函数的具体作用下一篇文章我会详细讲解等你看完下一篇文章之后至于选择哪种方式的问题就很好解决了。在开发一个组件的时候我是这样来做的当我一开始就知道这个组件会用到 state 或者生命周期函数时毫无疑问直接使用类继承的方式如果一开始用不到这些特性也不确定未来会不会用到那我就先用函数式组件如果随着业务的演进组件需要应用这些特性的时候我会再把它重构成类继承的方式。这个重构非常简单只需要将原来的函数变成组件类的 render 方法即可。 另外还有一点需要注意不管那种方式组件的名称首字母必须为大写。严格来说是 JSX 要求用户自定义的组件名首字母必须为大写如果是小写字母开头那么 React 会将其当成内置的组件直接将其渲染成一个 html 标签从而不会正确渲染用户自定义的组件。 如果你非要将组件名称以小写字母开头那你在以 JSX 语法使用之前也必须将其赋值为一个大写字母开头的变量如下所示 function helloMessage() {return divHello world./div
}const HelloMessage helloMessage;ReactDOM.render(HelloMessage /, mountNode); 但这有事何必呢纯粹是没事儿找事儿大家在实际项目开发时直接将组件名以大写字母开头即可。 属性 上面说完了在 React 中两种定义组件的方式。在上面的例子中我们定义的组件都是静态的然而在实际的开发中视图层组件往往会进行频繁更新或者需要从后端 API 获取动态数据在组件中展示。这就需要组件拥有接收外部输入的能力。 属性是组件的输入 在第二篇文章 《新型前端开发方式》 中有说到 “视图是数据的映射”那么其中说的数据指的就是属性。 如果把组件理解为一个函数那么属性就是这个函数的参数函数的返回值就是呈现到页面上的视图。而且通过上面部分的学习在 React 中组件确实可以以函数的形式来定义而且函数的参数就是一个包含当前组件接收到的所有属性的对象。 如下所示带有属性 name 的组件定义 import React, {Component} from react;class HelloMessage extends Component {render() {return divHello {this.props.name}./div;}
} 函数式 import React from react;function HelloMessage(props) {return divHello {props.name}./div;
}// 或者const HelloMessage props divHello {props.name}./div; 属性的传递也跟 HTML 一样在本文的最后一部分会有各种类型属性的详细介绍如下所示 import React, {Component} from react;
import ReactDOM from react-dom;class HelloMessageList extends Component {render() {return (divHelloMessage nameLucy /HelloMessage nameTom /HelloMessage nameJack //div)}
}ReactDOM.render(HelloMessageList /, document.querySelector(#root)); 这样页面上会展示出 Hello Lucy.
Hello Tom.
Hello Jack. 示例代码https://codepen.io/Sarike/pen... 属性必须为只读的 属性必须为只读的这一点非常重要请严格遵守。对应到上面说到的如果把组件理解为一个函数那么这个函数必须为一个纯函数Pure function在纯函数中不能修改其参数确定的输入必须有确定的输出。 虽然有些时候你修改了组件的属性貌似也能正常工作。没错因为 JavaScript 语言特性的原因没人能阻止你这么做。但是请先相信我严格遵守这条规则不仅能让你少踩很多坑而且能让你的应用稳定性更强、维护性更强。如果你直接修改组件的属性React 并不会感知到此修改从而不会重新渲染组件就导致了当前组件的视图展示与数据不一致但这个被修改的属性会随着下一次组件的渲染被生效到视图上而且这次渲染的时机是不确定的不难想象如果一个规模较大的项目里充满了这种不确定性是多么痛苦的一件事情。总之如果你随意修改组件的属性会很容易让你的应用充满许多难以排查的 BUG。 默认属性 通常情况下我们需要为组件的属性设为默认值。就像 HTML 标签的属性也有默认值一样例如 form 标签的 method 属性默认值是 GETinput 标签的 type 属性默认值是 text 一样。 还是上面 HelloMessage 组件如果需求是当不传入 name 属性时默认展示 Hello World.也就是说 name 属性的默认值是 World。 一种很容易想到的做法 divHello {this.props.name || World}./div 这样确实可以解决当前这个需求但是属性可能还会是个 Object也可能是个函数你当然可以先判断下这个属性是否为 undefined 然后决定是否使用默认值但是这样会让代码显得很不优雅而且也会增加很多繁琐的判断逻辑。 因此React 提供了相应的机制可以设置组件属性的默认值如下所示你需要通过组件的静态字段 defaultProps 来设置组件属性的默认值。如下所示 import React, {Component} from react;class HelloMessage extends Component {render() {return divHello {this.props.name}./div;}
}
HelloMessage.defaultProps {name: World
} 这样就可以了HelloMessage / 这样不为组件设置任何属性那么它就会在页面上展示Hello World.。 示例代码https://codepen.io/Sarike/pen... 属性的类型及校验 在开发较复杂的前端应用时我们经常会遇到许多因为类型检查导致的问题例如上面的 HelloMessage 组件我期望其 name 属性只能是字符串类型的你要是给我一个 Object我是没法正确展示的。为了在开发过程中尽快的发现这类问题React 为组件添加了类型检查的机制你需要给组件设置静态字段 propTypes 来设置组件各个属性的类型检查器。 import React, {Component} from react;
import PropTypes from prop-types;class HelloMessage extends Component {render() {return divHello {this.props.name}./div;}
}
HelloMessage.defaultProps {name: World
}
HelloMessage.propTypes {name: PropTypes.string
} 这样在开发过程中 React 就能校验组件接收到的属性值是否符合指定的类型如果校验不通过将会抛出警告。React 只会在开发模式下进行属性类型检查当代码进行生产发布后为了减少额外的性能开销类型检查将会被略过。 其实为每一个组件编写完善的属性类型是一个非常好的习惯这不仅能及时发现问题更重要的是配合几句简单额注释这将成为该组件一份非常好的文档一个完善的组件应该具有良好的封装性和易复用性在一个协作开发的项目中其他开发者需要引用你开发的组件时只需要看一下组件的属性列表大致就可以了解如何来使用这个组件省去了很多不必要的沟通。 下面是 React 提供的可用的数据类型检查器。 PropTypes.arrayPropTypes.boolPropTypes.funcPropTypes.numberPropTypes.objectPropTypes.stringPropTypes.symbol PropTypes.element 元素其实就是 JSX 表达式上一篇文章有说过 JSX 是 React.createElement 的语法糖一个 JSX 表达式实际上会生成一个 JS 对象在 React 中称之为元素Element。 PropTypes.node 所有可以被渲染的数据类型包括数值, 字符串, 元素或者这些类型的数组。 PropTypes.instanceOf(Message) 某个类的实例 PropTypes.oneOf([News, Photos]) 枚举属性值必须为其中的某一个值。 PropTypes.oneOfType([PropTypes.string, PropTypes.number]) 类型枚举属性必须为其中某一个类型。 PropTypes.arrayOf(PropTypes.number) 属性为一个数组且数组中的元素必须符合指定类型。 PropTypes.objectOf(PropTypes.number) 属性为一个对象且对象中的各个字段的值必须符合指定类型。 PropTypes.any 任何类型如果你想指定某些属性为必需属性你可以链式调动其 isRequired 来标识某个属性对于当前组件来说是必需的。如果在使用组件时未指定则会抛出警告提醒。 另外你还可以通过一个函数自定义属性验证器如果验证不通过你需要返回一个 Error 实例如下所示 function(props, propName, componentName) {if (!/matchme/.test(props[propName])) {return new Error(Invalid prop propName supplied to componentName . Validation failed.);}
} 设置组件的属性值 上面咱们了解到组件的属性有很多种类型下面说一下各种类型的属性是如何传递给组件的。其实很简单属性的值可以用一对大括号 { } 来包围其中可以指定任意的 JavaScript 表达式。如下所示 return (UsernameTom // 字符串age{18} // 数值isActivated{true} // 布尔值interests{[basketball, music]} // 数组address{{ city: Beijing, road: BeiWuHuan }} // 对象/
) 展开操作符 你也可以用展开操作符 ... 将一个对象的所有字段展开依次作为属性传递给组件上面的代码等价于 const userInfo {name: Tom,age: 18,isActivated: true,interests: [basketball, music],address: { city: Beijing, road: BeiWuHuan }
}
return User {...userInfo} / 值为 true 的属性的简写 如果是属性类型为布尔值且当前属性值为 true 可以只写属性名如下所示 inputdisabled // 禁用该输入框typetext
/ children 属性 用户自定义的组件内可以通过 this.props.children 来获取一个特殊的属性。该属性与其它属性的区别就是传递方式不同。 children 属性的值是指一对闭合的 JSX 标签中间的内容如下所示 UserListUser nameTom /User nameLucy /
/UserList 那么在 UserList 内部可以通过 this.props.children 来获取下面这个 JSX 片段 User nameTom /
User nameLucy / 该示例中获取到的实际上是一个包含两个 User 元素对象的数组。 总结 本文主要介绍了在 React 中组件的定义方式以及几个关键的注意事项。另外介绍了组件属性的作用、属性默认值、属性类型校验以及如何为组件传递属性。 希望内容对大家有用如有任何问题和建议可以给我留言谢谢。
