react从入门到精通pdf（React入门）

入门

引入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>