时间:2021-07-01 10:21:17 帮助过:23人阅读
创建组件之前要注意以下几点:
组件创建的名称首字母得大写
组件中返回的JSX只能是一个根节点,所有的内容得用一个元素都框起来
无状态函数式组件可以理解成就是一个函数生成的,使得代码的可读性更好,并且精简、便利,减少了冗余,无状态组件有以下特点:
组件无法被实例化,整体渲染提高
组件不能访问this对象,因为没有实例化,所以无法访问到this对象
组件没有生命周期
无状态组件只能访问输入的props,没有state状态
import React from 'react' import { connect } from 'dva'; function CreateComponent(props) { console.log(props); return ( <p> <span>{props.name}今年{props.age}岁</span> </p> ) } export default connect(state => ({ name:'小明', age:15 }))(CreateComponent);
每个组件类必须要实现一个render方法,这里要特别注意,这个render方法必须要返回一个JSX元素即要用一个最外层的元素将所有内容都包裹起来,如果返回并列多个JSX元素是不合法,如下所示:
import React from 'react' class CreateComponent extends React.Component { render() { return( <p> <h2>标题</h2> <ul> <li>首先</li> <li>其次</li> <li>最后</li> </ul> </p> ) } } export default CreateComponent;
以上实例,就是把h2元素和ul用一个p都给包起来
import React from 'react' class CreateComponent extends React.Component { clickFunc = (e) => { console.log("监听:",e.target.innerHTML); } clickValue = (value) => { console.log(value); } render() { return ( <p> <a onClick={this.clickFunc}>监听事件</a> <br/> <a onClick={this.clickValue.bind(this,123)}>this对象</a> </p> ) } } export default CreateComponent;
以上就是事件监听和传参实例
通常在组件中,state是用来放这个组件内部参数的状态的,而setState是用来改变state里面的参数,例如:
import React from 'react' class CreateComponent extends React.Component { state = { flag : true } clickValue = () => { this.setState({ flag: !this.state.flag }) } render() { return ( <p> <span>flag的值为:{this.state.flag ? '真' : '假'}</span> <br/> <button onClick={this.clickValue}>改变flag值</button> </p> ) } } export default CreateComponent;
props是组件里面的属性,在组件内部是不能更改自己本身的props的,比如,建立一个组件,然后在另外一个组件里面调用这个组件,如下:
import React from 'react'; function NewComponent(props) { return ( <p> {props.content} </p> ); } export default NewComponent;
建立一个组件NewComponent,然后调用,如下:
import React from 'react' import NewComponent from './newComponent.js' class CreateComponent extends React.Component { render() { return ( <p> <NewComponent content={'我是内容'} /> </p> ) } } export default CreateComponent;
从这里可以看出,props就是组件带入的属性值,props其实就是让外部组件对自己进行配置,而state是组件控制自己的状态
constructor初始化一些参数属性等等
componentWillMount这个函数在react16.3.0之后慢慢的被弃用了,使用componentDidMount替换
componentDidMount在组件渲染之后实行,可以加载数据
render组件渲染显示页面
import React from 'react' class CreateComponent extends React.Component { constructor () { super() console.log('construct:页面初始化') } componentWillMount () { console.log('componentWillMount:页面将要渲染') } componentDidMount () { console.log('componentDidMount:页面渲染结束') } render() { console.log('render:页面渲染'); return ( <p> 页面渲染 </p> ) } } export default CreateComponent;
输出结果:
construct:页面初始化 componentWillMount:页面将要渲染 render:页面渲染 componentDidMount:页面渲染结束
componentWillUnmount函数是在组件要删除之前执行的函数,如下代码:
import React from 'react'; class NewComponent extends React.Component { componentWillUnmount() { console.log('componentWillUnmount:将要从页面中删除'); } render() { return ( <p> {this.props.content} </p> ); } } export default NewComponent;
建立一个组件NewComponent,然后在CreateComponent组件中引入这个组件,如下:
import React from 'react' import NewComponent from "./newComponent.js"; class CreateComponent extends React.Component { constructor () { super() console.log('construct:页面初始化'); this.state = { content:'测试组件', isDelete:false } } componentWillMount () { console.log('componentWillMount:页面将要渲染') } componentDidMount () { console.log('componentDidMount:页面渲染结束') } deleteFunc = () => { this.setState({ isDelete:true }) } render() { console.log('render:页面渲染'); return ( <p> 页面渲染 <input type="button" value='删除' onClick={this.deleteFunc}/> {!this.state.isDelete?( <NewComponent content={this.state.content}/> ):(null)} </p> ) } } export default CreateComponent;
当点击删除按钮的时候,组件NewComponent会被删除,在删除之前会执行componentWillUnmount函数
输出结果:
construct:页面初始化 componentWillMount:页面将要渲染 render:页面渲染 componentDidMount:页面渲染结束 componentWillUnmount:将要从页面中删除
以上几个生命周期是我们会常用到的组件生命周期,组件的生命周期还有更新阶段的生命周期,不过这些比较少用,这里简单介绍一下:
通过这个方法控制组件是否重新渲染,如果返回false不会重新渲染,如下
import React from 'react' import NewComponent from "./newComponent.js"; class CreateComponent extends React.Component { constructor () { super() console.log('construct:页面初始化'); this.state = { content:'测试组件', isDelete:false } } componentWillMount () { console.log('componentWillMount:页面将要渲染') } componentDidMount () { console.log('componentDidMount:页面渲染结束') } shouldComponentUpdate(nextProps, nextState){ if(nextState.isDelete){ return false; } } deleteFunc = () => { this.setState({ isDelete:true }) } render() { console.log('render:页面渲染'); return ( <p> 页面渲染 <input type="button" value='删除' onClick={this.deleteFunc}/> {!this.state.isDelete?( <NewComponent content={this.state.content}/> ):(null)} </p> ) } } export default CreateComponent;
此时点击删除按钮,页面没有进行渲染,那是因为在shouldComponentUpdate中设置了返回值为false,当返回值为false的时候,页面无法重新渲染。这个函数第一个参数表示最新的props,第二个参数表示最新的state
组件从父组件接收到新的 props 之前调用,函数的参数nextProps表示接收到的数据
在NewComponent组件中:
import React from 'react'; class NewComponent extends React.Component { componentWillUnmount() { console.log('componentWillUnmount:将要从页面中删除'); } componentWillReceiveProps(nextProps){ console.log(nextProps); } render() { return ( <p> {this.props.content} </p> ); } } export default NewComponent;
在组件CreateComponent中:
import React from 'react' import NewComponent from "./newComponent.js"; class CreateComponent extends React.Component { constructor () { super() console.log('construct:页面初始化'); this.state = { content:'测试组件', isDelete:false } } componentWillMount () { console.log('componentWillMount:页面将要渲染') } componentDidMount () { console.log('componentDidMount:页面渲染结束') } changeFunc = () => { this.setState({ content:'文字修改' }) } render() { console.log('render:页面渲染'); return ( <p> 页面渲染 <input type="button" value='修改content' onClick={this.changeFunc}/> {!this.state.isDelete?( <NewComponent content={this.state.content}/> ):(null)} </p> ) } } export default CreateComponent;
不过componentWillReceiveProps将在react16.3.0开始之后弃用
组件重新渲染之前调用这个方法,将在react16.3.0开始之后弃用
组件重新渲染并且把更改变更到真实的 DOM 以后调用
注意: componentWillUpdate、componentWillReceiveProps、componentWillMount这三个生命周期将在react116.3.0之后开始弃用
相关推荐:
React组件生命周期实例分析
React组件Dragact 0.1.4详解
以上就是React入门学习:React创建组件的方法的详细内容,更多请关注Gxl网其它相关文章!