正文

react学习笔记1之声明组件的两种方式

向着太阳生  向着太阳生  2022-10-01  160

关键词：

//定义组件有两种方式，函数和类

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component{
    render(){
        return <h1>Hello, {this.props.name}</h1>;
    }
}

ReactDOM.render(
   <Welcome name="kevin"/>,
    document.getElementById(‘root‘)
);

//函数和类都可以定义组件，组件的props是只读的，不管你的组件是通过函数还是类声明的；用类声明组件的最大好处是可以设置组件的状态，通过更新组件的状态从而达到更新组件UI的目的。而函数声明的组件则没有这个功能。
class Welcome extends React.Component{
     constructor(props){
        super(props);
        this.state = {date:new Date()}
        }
       componentDidMount(){
        setInterval(()=>this.tick(),1000)
        }
            tick(){
            this.setState({date:new Date()})
        }
    render(){
        return (
                <h1>
                    Hello, {this.props.name}
                    <span>now:{this.state.date.toLocaleTimeString()}    
                    </span>
                </h1>
                )
            }
        }

      ReactDOM.render(
        <Welcome name="kevin "/>,
        document.getElementById(‘example‘)
      );

react学习笔记总结(代码片段)

针对React拓展相关的学习。文章目录一.React项目打包二.React扩展之setState两种写法三.React扩展之lazyLoad(懒加载)四、React的stateHook五、React的EffectHook六、React的RefHook七、React的Fragment八、React的Context九、React的PureComponent1.Component组件... 查看详情

学习react笔记三（父子传值）(代码片段)

一、组件定义组件的两种方式1.函数组件constRen=function()return(<div>奥特曼</div>)2.类组件classHeadextendsComponentrender()return(<div>我是封装出来的组件</div>)使用的话直接当成标签来用就好了注意首字母大写哈constroot=... 查看详情

react学习笔记总结(代码片段)

文章目录1.React简介2.React的核心工具库3.实现一个React的实例4.React两种创建虚拟DOM的方式5.虚拟DOM与真实DOM的对比6.jsx语法规则7.jsx实战练习8.React开发者工具安装9.React函数式组件10.js的类相关知识11.React类式组件12.组件实例对象的... 查看详情

react学习笔记总结(代码片段)

react学习笔记之组件生命周期

React中的组件有三种状态：Mounted：已插入真实DOMUpdating：正在被重新渲染Unmounted：已移出真实DOM它为每个状态都提供了两种处理函数：　　will：函数在进入状态之前调用，　　did：函数在进入状态之后调用，三种状态共计五种处... 查看详情

react学习笔记总结(代码片段)

文章目录1.React之props的使用2.React之对props进行限制3.React之props只读(知道修改在这是什么效果！)4.React之props简写方式5.类式组件中的构造器与props的注意事项6.函数式组件使用props7.类式组件字符串形式的refs属性8.React之回调形... 查看详情

react学习笔记总结(代码片段)

React的两种方式组件定义的区别[重复]

】React的两种方式组件定义的区别[重复]【英文标题】：DifferenceintwowayscomponentdefinitionforReact[duplicate]【发布时间】：2017-10-2822:43:45【问题描述】：我正在研究React，但我不知道我们应该如何定义React组件。我们是否应该使用如下的E... 查看详情

react自定义组件的两种方式(代码片段)

...";classHelloextendsComponent//构造函数constructor(props)super(props);//声明私有数据(类似vue中data的作用)this.state=msg:‘123‘render()console.log(this.state)//打印查看return(<div>/*在组件中使用私有数据*/<h1>this.state.msg</h1></div>);exportdefa... 查看详情

react笔记1(代码片段)

一、准备知识ES6、JSX二.组件定义组件的两种方式：使用ES3class(类组件)和使用函数（函数组件）使用class定义组件：class继承自React.componentclass内部必须定义render方法，render方法返回代表该组件UI的元素；使... 查看详情

React 组件之间的两种方式绑定

】React组件之间的两种方式绑定【英文标题】：TwowaybindingbetweenReactcomponents【发布时间】：2021-10-1618:48:40【问题描述】：在导航栏上工作（对移动设备进行更改）-在移动设备上时，我想使用列表底部的“关闭”按钮垂直显示项目... 查看详情

javascript学习笔记

//javascript学习笔记函数表达式//声明函数的两种方式：1、函数声明2、函数表达式//1、函数声明functionfunctionName(arg0,arg1,arg2){ //函数体fireFoxSafari,Chrome,Opera都给函数定义了一个非标准的name属性，用于访问函数名，这个值永远在functio... 查看详情

react学习笔记总结(代码片段)

react组件的两种创建方式(代码片段)

使用函数创建组件函数组件∶使用JS的函数（或箭头函数)创建的组件函数组件必须有返回值，表示该组件的结构，如果返回值为null，表示不渲染任何内容组件名称必须以大写字母开头，React据此区分组件和普... 查看详情

react学习笔记2之正确使用状态

//状态不要直接修改，比如://错的，这样写不会重新渲染组件this.state.comment=‘Hello‘;//修改状态正确的方式this.setState({comment:‘Hello‘});setState方法的参数可以接受一个对象，也可以接受一个回调函数，状态的修改可能是异步的，... 查看详情

学习笔记：图的dfs和bfs的两种搜索办法

在学习图结构的过程中，DFS和BFS是两种不同的遍历方式，其寻找元素具有不同的优点和缺陷。 BFS被称作广度优先算法，在遍历整个图的过程中，BFS将采用入队的方式进行，值得一提的是，这和树结构中的层序遍历有... 查看详情

springcloud学习笔记总结(代码片段)

文章目录1.zuul与Gateway2.Gateway之简介3.Gateway之核心概念+架构流程4.Gateway之搭建Gateway服务器+测试5.Gateway之路由的两种配置方式6.Gateway之配置动态路由7.Gateway之Predicate分类8.Gateway之Filter(GatewayFilter)9.SpringCloudConfig之分布式配置... 查看详情

04定义组件的两种方式(代码片段)

...14</body>15</html>16<scripttype="text/babel">17//1,定义组件18//方式1，工厂函数组件（简单组件）19functionMyComponent1()20return 查看详情