React之函数式组件

<!DOCTYPE html>

<html>

<head>

<title>1_函数式组件</title>

</head>

<body>

//1.创建函数式组件

function MyComponent(){

console.log(this);//此处的this是undefined，因为babel编译后开启了严格模式

return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>

}

//2.渲染组件到页面

ReactDOM.render(<MyComponent/>, document.getElementById('test'));

// 执行了 ReactDOM.render(<MyComponent/>, document.getElementById('test'))之后发生了什么？1.React解析组件标签，找到了MyComponent组件

//2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实的DOM，随后呈现在页面中。

</script>

</body>

</html>

React之函数式组件相关推荐

[react] react的函数式组件有没有生命周期？
[react] react的函数式组件有没有生命周期? 没有个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
react中函数式组件React Hooks
React Hooks 函数式组件使用hooks理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高在16. ...
前端学习（2224）：react之函数式组件
import React from 'react'; import ReactDOM from 'react-dom';function Childcom() {let title = < h2 ...
React之函数式组件使用props
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
React之函数式组件和高阶组件（装饰器、带参装饰器）
import React from 'react'; // 此句不能少 import ReactDom from 'react-dom';const Wrapper = props => < ...
React 之函数式组件使用props
对于react的三大核心属性state.props.refs,只有props能被函数式组件使用,因为只有props属性可以作为参数调用. 相关代码如下: <!DOCTYPE html> & ...
2021-05-29 react antd 函数式组件使用history.push(url)时，跳转不刷新的问题？
**在传递URL使使用给传递了一个state成功解决问题形如history.push(url,{a:1}) **
react讲解（函数式组件，react hook）
文章目录前言一.函数式组件理解: 作用代码示例: 函数组件注意事项二.React hook React Hooks 优势 Hook 使用规则 2.常用的hook useState useEf ...
React（二）：类组件、函数式组件
Component(组件)可以是类组件(class component).函数式组件(function component). 1.类组件: 通常情况下,我们会使用ES6的class关键字来创建Rea ...

React之函数式组件

React之函数式组件相关推荐

最新文章

热门文章