JavaScript中React面向组件编程怎么使用 |
您所在的位置:网站首页 › react如何创建组件 › JavaScript中React面向组件编程怎么使用 |
JavaScript中React面向组件编程怎么使用
发布时间:2023-03-31 15:05:25
来源:亿速云
阅读:63
作者:iii
栏目:开发技术
这篇文章主要介绍“JavaScript中React面向组件编程怎么使用”,在日常操作中,相信很多人在JavaScript中React面向组件编程怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript中React面向组件编程怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧! 前言:React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state、props、refs。通过这三大核心属性的使用,我们能够实现对组件的状态进行更新。 一,组件的基本理解和使用1. 函数组件 function MyComponent() { return 我是函数定义的组件(适用于简单组件的定义) } ReactDOM.render(, document.getElementById('test'))函数组件的渲染过程 1.React解析了组件标签,找到了对应的组件 2.发现这个组件是一个函数定义的,随后调用该函数,生成一个虚拟dom 3.最后将虚拟dom转化成为真实dom,呈现在页面中2. 类式组件 class MyComponent extends React.Component { render() { return 我是类定义的组件适用于复杂数据类型 } } ReactDOM.render(, document.getElementById('test'))类式组件的渲染过程 1.React解析了组件标签,找到了对应的组件 2.发现这个组件是一个类定义的,随后new出来一个实例对象,并通过该实例调用原型上的render方法 3.将render()返回的内容生成一个虚拟dom 4.最后将虚拟dom转化成为真实dom,呈现在页面中3.组件的注意事项组件名必须首字母大写 虚拟DOM元素只能有一个根元素 虚拟DOM元素必须有结束标签二,组件的三大核心属性1.statestate 是一个对象,它包含组件的数据状态,当状态变化时,会触发视图的更新。你可以理解它的作用跟 Vue 中的 data 对象类似。 class Weather extends React.Component { constructor() { super() this.state = { isHot: false, wind: '微风' } this.chang = this.chang.bind(this) } render() { let { isHot, wind } = this.state return 今天的天气很 {isHot ? "炎热" : "凉爽"},{wind} }hang() { console.log(this) this.setState({ isHot: !this.state.isHot }) } } ReactDOM.render(, document.getElementById('test'))1. 注意事项 1.组件中render方法中的this为组件实例对象 2.组件自定义的方法中this为undefined,如何解决? 1.强制绑定this: 通过函数对象的bind() 2.箭头函数 3.状态数据,不能直接修改或更2.简写方式 class Weather extends React.Component { state = { isHot: false, wind: '微风' } render() { let { isHot, wind } = this.state return 今天的天气很 {isHot ? "炎热" : "凉爽"},{wind} } chang = ()=>{ this.setState({ isHot: !this.state.isHot//这里的修改是一种合并,对比属性的变化,如果有赋新值,没有则跳过 }) } } ReactDOM.render(, document.getElementById('test')) let a = new Weather()设置状态:setState setState(object nextState[, function callback]) 不能在组件内部通过this.state修改状态,因为该状态会在调用 setState() 后被替换。 setState() 并不会立即改变 this.state,而是创建一个即将处理的 state。setState() 并不一定是同步的,为了提升性能 React 会批量执行 state 和 DOM 渲染。 setState() 总是会触发一次组件重绘,除非在 shouldComponentUpdate() 中实现了一些条件渲染逻辑。 2.propsReact 中组件通过 props 属性接收外部传入的数据,这点 Vue 跟 React 是一致的 react 中说的单向数据流值说的就是 props,根据这一特点它还有一个作用:组件之间的通信。 props 本身是不可变的,但是有一种情形它貌似可变,即是将父组件的 state作为子组件的 props,当父组件的 state 改变,子组件的 props 也跟着改变,其实它仍旧遵循了这一定律:props 是不可更改的。 class MyComponent extends React.Component { render() { return ( {this.props.name} {this.props.age} ); } } ReactDOM.render( , document.getElementById("test") );props的特点: 每个组件对象都会有props(properties的简写)属性 组件标签的所有属性都保存在props中 内部读取某个属性值:this.props.propertyName 作用:通过标签属性从组件外 向组件内传递数据(只读 read only) 对props中的属性值进行类型限制和必要性限制 对props进行限制 引入 prop-type 库,这就是专门用于限制 props 属性的一个库 导入 prop-type 库,到当前页面 根据 Person.propTypes = {} 进行限制 class MyComponent extends React.Component { render() { return ( {this.props.name} {this.props.age} ); } } // 校验类型 MyComponent.propTypes = { name: PropTypes.string, // 这里的 PropTypes 变量是全局挂载的 age: PropTypes.number, }; ReactDOM.render( , document.getElementById("test") );props的简写 class Weather extends React.Component { constructor(props) {//是否接受,取决于是否使用外部数据 super(props)//只能上面接受了props,super()就去传递,否则后续的使用,可能就会出现问题 } static propTypes = { name: PropTypes.string.isRequired,//限制name为字符串类型,必填 // age: PropTypes.number, sex: PropTypes.string, speak: PropTypes.func } static defaultProps = { sex: '男', } render() { let { name, age, sex } = this.props return ( 姓名:{name} 性别:{sex} 年龄:{age + 1} ) } } ReactDOM.render(, document.getElementById('test'))函数组件使用props // 函数组件 function MyComponent(props) { return ( {props.name} {props.age} ); } // 校验类型 MyComponent.propTypes = { name: PropTypes.string, age: PropTypes.number, }; ReactDOM.render( ,document.getElementById("test") ); 3.refReact 中的 Refs 可以让我们访问 DOM 节点,它有三种使用方式:字符串方式,回调函数式,createRef。 在 React 中 Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素。 在 React单项数据流中,props是父子组件交互的唯一方式。要修改一个子组件,需要通过的新的props来重新渲染。 但是在某些情况下,需要在数据流之外强制修改子组件。被修改的子组件可能是一个React组件实例,也可能是一个DOM元素。对于这两种情况,React 都通过 Refs的使用提供了具体的解决方案。 回调函数方式 class MyComponent extends React.Component { handleAlert = () => { // 直接从组件实例上获取 myInput console.log(this.myInput); // alert(this.myInput.value); }; render() { return ( {/* ref 直接定义成一个回调函数,参数就是节点本身,将它赋值给组件的一个 myInput 属性 */} (this.myInput = ele)} type="text" /> alert ); } } ReactDOM.render(, document.getElementById("test"));React官方提示: 如果 ref 回调函数是以内联函数的方式定义的,在更新过程中它会被执行两次,第一次传入参数 null,然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例,所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题,但是大多数情况下它是无关紧要的。 createRef -官方推荐使用 class MyComponent extends React.Component { // 创建 ref myInput = React.createRef(); handleAlert = () => { console.log(this.myInput.current); // 这里需要注意,元素是在 current 属性上 alert(this.myInput.current.value); }; render() { return ( {/* 将创建好的 ref 附加到元素上 */} alert ); } } ReactDOM.render(, document.getElementById("test"));上面就是使用 React.createRef() 方法创建 ref 的方式,特别需要注意的是,创建出来的 ref 的值是一个对象,我们需要的 DOM 元素是放在对象的 current 属性上,如上面的 this.myInput.current。 到此,关于“JavaScript中React面向组件编程怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章! 推荐阅读: JavaScript怎么让伪进度条在页面上显示成gif图像 javascript中怎么保留两位小数免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 javascript react 上一篇新闻:怎么使用C语言实现珠玑妙算Mastermind小游戏 下一篇新闻:GoLang jwt无感刷新与SSO单点登录限制解除的方法是什么 猜你喜欢 Express框架中_router对象数据结构如何使用 Java异步编程之Callbacks与Futures模型怎么调用 怎么使用C语言实现Hash表 react-router-dom异步加载路由的方式是什么 Python可视化最频繁使用的工具有哪些 SpringBoot下集成缓存工具类CacheManager怎么使用 vue2怎么自定义组件通过rollup配置发布到npm Express框架Router、Route和Layer对象如何使用 Vue实现父子组件传值的方法是什么 Vue防抖和节流怎么使用 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |