reactjs定义组件：函数式组件

执行了ReactDOM.render(…之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_函数式组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建函数式组件function MyComponent(){console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>}//2.渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/* 执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？1.React解析组件标签，找到了MyComponent组件。2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。*/</script>
</body>
</html>

reactjs定义组件：函数式组件相关推荐

初步了解react-babel-虚拟DOM-JSX-类组件-函数式组件
一初步了解React 需要理解的概念有: 什么是六何分析法? 利用六何分析法剖析 React 如何查看哪些项目是用 reactjs 进行开发的学习 ReactJs 常用的 JavaScript 语 ...
vue中的render函数、h（）函数、函数式组件
一.什么是render 官网:用于编程式地创建组件虚拟 DOM 树的函数. 在我们使用webpack脚手架创建项目时,都能在main.js中看到一个render函数 import Vue from ' ...
reactjs组件实例的三大属性之props使用示例:在函数式组件中使用props
props基本使用 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
react讲解（函数式组件，react hook）
文章目录前言一.函数式组件理解: 作用代码示例: 函数组件注意事项二.React hook React Hooks 优势 Hook 使用规则 2.常用的hook useState useEf ...
React之函数式组件
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
为什么react选择了函数式组件（剖析原理）
不好意思,这是知乎上我写的文章,就不再csdn发布了.如果需要阅读,请点击: 为什么react选择了函数式组件(剖析原理) 最近,发现知乎的连接出问题了,所以,暂时把内容放在此处.如果知乎上好了的话, ...
React之函数式组件和高阶组件（装饰器、带参装饰器）
import React from 'react'; // 此句不能少 import ReactDom from 'react-dom';const Wrapper = props => < ...
React函数式组件
React组件:可以分为类组件和函数式组件 1.函数式组件中没有state 2.函数式组件中没有生命周期(重点,涉及到生命周期的方法只能在类组建中定义) 可以借助react提供的hooks在函数式组建 ...
Vue 简单的函数式组件
Vue 函数式组件吐槽- 以下是官方的例子,嗯-啥都看不懂-没有实现任何效果- var EmptyList = { /* ... */ } var TableList = { /* ... */ } ...

reactjs定义组件：函数式组件

reactjs定义组件：函数式组件相关推荐

最新文章

热门文章