react创建组件及注意事项

1. main.js

// JS打包入口文件
// 1. 导入 React包
import React from 'react'
import ReactDOM from 'react-dom'// 使用JS语法，创建虚拟DOM元素
// var myDiv = React.createElement('h1', { id: 'mydiv', title: 'ok' }, '这是一个H1')
var myDiv = <div>OKOKOK</div>// 在使用 Hello 组件之前，先导入 组件
import Hello from './components/Hello.jsx'
import Hello2 from './components/Hello2.jsx'ReactDOM.render(<div><Hello name="zs" age={20}></Hello><Hello2 address="北京传智播客" info="黑马程序员"></Hello2>
</div>, document.getElementById('app'))

注意：以上两种创建组件的方式，有着本质上的区别，其中，使用 function 构造函数创建的组件，内部没有 state 私有数据，只有一个 props 来接收外界传递过来的数据；
使用 class 关键字创建的组件，内部，除了有 this.props 这个只读属性之外，还有一个专门用于存放自己私有数据的 this.state 属性，这个 state 是可读可写的！
基于上面的区别：我们可以为这两种创建组件的方式，下定义了：使用 function 创建的组件，叫做【无状态组件】；使用 class 创建的组件，叫做【有状态组件】
有状态组件和无状态组件，最本质的区别，就是有无 state 属性；同时， class 创建的组件，有自己的生命周期函数，但是，function 创建的组件，没有自己的生命周期函数；
问题来了：什么时候使用有状态组件，什么时候使用无状态组件呢？？？
1. 如果一个组件需要存放自己的私有数据，或者需要在组件的不同阶段执行不同的业务逻辑，此时，非常适合用 class 创建出来的有状态组件；
2. 如果一个组件，只需要根据外界传递过来的 props，渲染固定的页面结构就完事儿了，此时，非常适合使用 function 创建出来的无状态组件；（使用无状态组件的小小好处：由于剔除了组件的生命周期，所以，运行速度会相对快一丢丢）

2. hello.jsx

import React from 'react'
// 在 function 定义的组件中，如果想要使用 props，必须先定义，否则无法直接使用
// 但是，在class定义的组件中，可以直接使用 this.props 来直接访问，不需要预先接收 props
export default function Hello(props) {// console.log(props)return <p>haha --- {props.name}</p>
}

3. hello2.jsx

import React from 'react'// 使用 class 创建的类，通过 extends 关键字，继承了 React.Component 之后，这个类，就是一个组件的模板了
// 如果想要引用这个组件，可以把 类的名称， 以标签形式，导入到 JSX 中使用
export default class Hello2 extends React.Component {constructor(props) {// 注意： 如果使用 extends 实现了继承，那么在 constructor 的第一行，一定要显示调用一下 super()//  super() 表示父类的构造函数super(props)// 在 constructor 中，如果想要访问 props 属性，不能直接使用 this.props， 而是需要在 constructor 的构造器参数列表中，显示的定义 props 参数来接收，才能正常使用；// console.log(props)// 注意： 这是固定写法，this.state 表示 当前组件实例的私有数据对象，就好比 vue 中，组件实例身上的 data(){ return {} } 函数// 如果想要使用 组件中 state 上的数据，直接通过 this.state.*** 来访问即可this.state = {msg: '这是 Hello2 组件的私有msg数据',info: '瓦塔西***'}}// 保存信息1： No `render` method found on the returned component instance: you may have forgotten to define `render`.// 通过分析以上报错，发现，提示我们说，在 class 实现的组件内部，必须定义一个 render 函数render() {// 报错信息2： Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.// 通过分析以上报错，发现，在 render 函数中，还必须 return 一个东西，如果没有什么需要被return 的，则需要 return null// 虽然在 React dev tools 中，并没有显示说 class 组件中的 props 是只读的，但是，经过测试得知，其实 只要是 组件的 props，都是只读的；// this.props.address = '123'// console.log(this.props)return <div><h1>这是 使用 class 类创建的组件</h1><h3>外界传递过来的数据是： {this.props.address} --- {this.props.info}</h3><h5>{this.state.msg}</h5>{/* 1.1 在React中，如果想要为元素绑定事件，不能使用 网页中 传统的 onclick 事件，而是需要 使用 React 提供的  onClick */}{/* 1.2 也就是说：React中，提供的事件绑定机制，使用的 都是驼峰命名，同时，基本上，传统的 JS 事件，都被 React 重新定义了一下，改成了 驼峰命名 onMouseMove  */}{/* 2.1 在 React 提供的事件绑定机制中，事件的处理函数，必须直接给定一个 function，而不是给定一个 function 的名称 */}{/* 2.2 在为 React 事件绑定 处理函数的时候，需要通过 this.函数名， 来把 函数的引用交给 事件 */}<input type="button" value="修改 msg" id="btnChangeMsg" onClick={this.changeMsg} /><br /></div>}changeMsg = () => {// console.log('ok')// 注意： 这里不是传统网页，所以 React 已经帮我们规定死了，在 方法中，默认this 指向 undefined，并不是指向方法的调用者// console.log(this)// 直接使用 this.state.msg = '123' 为 state 上的数据重新赋值，可以修改 state 中的数据值，但是，页面不会被更新；// 所以这种方式，React 不推荐，以后尽量少用；// this.state.msg = '123'// 如果要为 this.state 上的数据重新赋值，那么，React 推荐使用 this.setState({配置对象}) 来重新为 state 赋值// 注意： this.setState 方法，只会重新覆盖那些 显示定义的属性值，如果没有提供最全的属性，则没有提供的属性值，不会被覆盖；/* this.setState({msg: '123'}) */// this.setState 方法，也支持传递一个 function，如果传递的是 function，则在 function 内部，必须return 一个 对象；// 在 function 的参数中，支持传递两个参数，其中，第一个参数是 prevState，表示为修改之前的 老的 state 数据// 第二个参数，是 外界传递给当前组件的 props 数据this.setState(function (prevState, props) {console.log(props)return {msg: '123'}}, function () {//由于 this.setState 是异步执行的，所以，如果想要立即拿到最新的修改结果，最保险的方式， 在回调函数中去操作最新的数据console.log(this.state.msg)})//经过测试发现， this.setState 在调用的时候，内部是异步执行的，所以，当立即调用完 this.setState 后，输出 state 值可能是旧的console.log(this.state.msg)}
}

react创建组件及注意事项相关推荐

react创建组件_如何使用React创建时间轴组件
react创建组件 These days I've been working on a new page for my website. I wanted to have a Timeline to ...
React创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...
深入解析React创建组件的三种方式
eact创建组件的三种方式: 1.函数式无状态组件 2.es5方式React.createClass组件 3.es6方式extends React.Component 三种创建方式的异同 1.函数式无 ...
react 创建组件
解析React 方法一.使用webpack 在package.json添加 "dependencies": {"react": "^0.14.0&qu ...
React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件定义一个组件最简单的方式是使用JavaS ...
React 创建组件使用组件 2
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 组件: 通过组件,可以将UI拆分成独立的,可重复使用的部分,从概念上讲,组件就像javaScript函数,它们 ...
react待办事项_使用React创建一个简单的待办应用
react待办事项 You could be wondering what is so special about React; What we will do is pick up from a p ...
React 项目---class 创建组件 (11)
回顾 function 创建组件在前面的学习中,我们已经介绍了一种方法来创建组件利用function,这里我们一起来回顾一下 function Hello(props){return <di ...
React 项目--创建组件（7）
创建组件在上一篇的博客中我们介绍了react中字符串的处理方式和字符串数组的处理方式,如需回顾: https://blog.csdn.net/datouniao1/article/details/1 ...

react创建组件及注意事项

react创建组件及注意事项相关推荐

最新文章

热门文章