- A+
所属分类：Web前端
入门
- 引入react
- 创建容器
- 创建虚拟DOM
- 渲染虚拟DOM到页面
<!--引入react,react.develop要在react-dom之前--> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <!-- 创建容器--> <div id="test"></div> <!-- 写babel,babel将jsx翻译 --> <script type="text/babel"> // 1 创建虚拟DOM const VDOM = <h1>hello</h1> // 不加单引号 // 2 渲染虚拟DOM到页面 , (虚拟DOM,容器) const container = document.getElementById('test'); const root = ReactDOM.createRoot(container); root.render(VDOM); </script> jsx语法规则
// jsx语法规则 // 1.不要加引号 // 2.标签中混入---JS表达式,要用{} // 3.样式的类名指定要用 className // 4.内联样式要用style={{key:value}}写 // 5.虚拟DOM只能有一个根标签 // 6.标签必须闭合,比如input后面要加/使其闭合 // 7.标签首字母 // - 小写,则表示html标签,否则报错 // - 大写,则为React定义的标签,未定义则报错 <script type="text/babel"> const data = "sjsjs" const VDOM = ( <div> <h2 className="title" style={{ color: 'white', fontSize: '40px' }}>{data}</h2> <input type="text" /> </div> ) ReactDOM.render(VDOM, document.getElementById('test')) </script> // react可以自动遍历数组,但是不会遍历对象 const data = ['v1', 'v2', 'v3']; // 每一个li都应该有一个独一无二的key,此处用index在某种情况下存在隐患 const VDOM = ( <div> <h1>hello</h1> <ul> { data.map((item, index) => { return <li key={index}>{item}</li> }) } </ul> </div> ) 创建虚拟DOM的两种方法
虚拟DOM
- 虚拟DOM本质是object类型的对象
- 虚拟DOM比真实DOM轻
- 虚拟DOM最终会被react传化为真实DOM,呈现在页面中
js创建(一般不用)
<script type="text/babel"> // 1 创建虚拟DOM (标签名, 标签属性, 标签内容) const VDOM = React.createElement('h1', { id: 'test' }, 'hello') // 2 渲染虚拟DOM到页面 , (虚拟DOM,容器) const container = document.getElementById('test'); ReactDOM.render(VDOM, container) </script> jsx创建
<script type="text/babel"> // 1 创建虚拟DOM const VDOM = <h1>hello</h1> // 不加单引号 // 2 渲染虚拟DOM到页面 const container = document.getElementById('test'); const root = ReactDOM.createRoot(container); root.render(VDOM); </script> 面向组件编程
函数式组件
<script type="text/babel"> // 创建函数式组件 , 自定义的react组件要大写 function Demo() { return <h2>我是用函数定义的组件,用于[简单组件]的定义</h2> } const root = ReactDOM.createRoot(document.getElementById('test')); root.render(<Demo />) // 执行了render之后 // 1.react解析组件标签,找到Demo组件 // 2.发现组件是函数定义的,调用函数,将虚拟DOM转换为真实DOM,呈现在页面中 </script> 类式组件
<script type="text/babel"> // 创建类式组件 , 类必须继承React.Component class MyComponent extends React.Component { // render放在MyComponent原型对象上,供实例使用 // render中的this是MyComponent的实例对象 render() { return <h2>我是用函数定义的组件,用于[简单组件]的定义</h2> } } // 渲染组件到页面 const root = ReactDOM.createRoot(document.getElementById('test')); root.render(<MyComponent />) // 执行了render之后 // 1.react解析组件标签,找到MyComponent组件 // 2.发现组件是类定义的,随后new 这个实例,并通过该实例调用到原型上的方法 // 3.将render返回的虚拟DOM转化为真实DOM,放在页面中 </script> 
