React入门

入门

  1. 引入react
  2. 创建容器
  3. 创建虚拟DOM
  4. 渲染虚拟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

  1. 虚拟DOM本质是object类型的对象
  2. 虚拟DOM比真实DOM轻
  3. 虚拟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>

标签: Javascript

添加新评论