React
1、React基础
1、引入React
引入react使用cdn方式，还有另一种
<!-- 引入React核心库 --> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <!-- 引入ReactDOM，用于支持react操作DOM --> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
2、使用React渲染
<body> <div id="root"></div> </body> // React18版本之前的渲染DOM方法 // ReactDOM.render('你好',document.getElementById('root')) <script type="text/babel"> // React18版本使用的渲染DOM方法 const root = ReactDOM.createRoot(document.getElementById('root')); const dom = React.createElement('div', {value:'你好'}, '你好a'); // 虚拟dom console.log(dom); root.render(dom) </script>
3、jsx语法
<!-- 引入babel，用于将jsx转为js --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <!-- script标签类型需是babel类型 --> <script type="text/babel"> const myId = 'heLLo'; const myData = 'shang'; //1.创建虚拟DOM const VDOM = ( <div> <h2 className="title" id={myId.toLowerCase()}> <span style={{ color: 'white', fontSize: '29px' }}> {myData.toUpperCase()} </span> </h2> <h2 className="title" id={myId.toUpperCase()}> <span style={{ color: 'white', fontSize: '29px' }}> {myData.toLowerCase()} </span> </h2> <input type="text" /> {/*如果这个标签名为大写的话，jsx会认为这是个组件*/} {/*<Sz>雷猴</Sz>*/} </div> ) //2.渲染虚拟DOM到页面(react18版本使用的渲染方法) const root = ReactDOM.createRoot(document.getElementById('test')) root.render(VDOM) </script>
jsx语法规则：
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
js表达式：只有一行代码 并且要有返回值
a 变量a
function fn(){}//不行
fn()// 函数调用
a?b:c //三元表达式
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
2、React 组件
1、两种不同的组件
1.1、函数组件(无状态组件)：
函数组件又叫做无状态组件
// 定义 function Hello() { // 此处的this是undefined，因为代码经过babel编译后开启了严格模式 console.log(this); return ( <div>这是一个函数组件</div> ) } // 函数组件的两种使用方式 {Hello()} <Hello></Hello>
函数组件规范：
1、使用函数或箭头函数定义
2、名称需要是大写字母开头
3、必须要有返回值，表示该组件的结构
1.2、类组件(有状态组件)：
类组件又叫做有状态组件，状态（state）及数据
无状态组件为了展示静态数据，有状态组件为表示动态数据
// 定义 class Hello extends React.Component { //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。 console.log('render中的this:',this); render() { return <div>这是一个类组件</div> } } // 使用
类组件规范：
1、使用ES6里的class定义
2、名称需要是大写字母开头
3、类组件应该继承React.Component父类， 从而可以使用父类中的方法或属性
4、必须提供render方法，和返回值
1.3、受控组件和非受控组件
受控组件：
通过自己实现数据的双向绑定，就是受控组件
非受控组件：
组件不受数据控制
3、React事件处理
3.1、事件绑定
class ClassHello extends React.Component { oncli(){ alert('点击了Hello') } render() { return ( // 使用this调用类中的方法 <div className='hello' onClick={this.oncli}>我是一个函数组件！</div> ) } }
语法：on+事件名称={ }
事件名称采用驼峰命名法
3.2、事件对象
e: 事件对象
function Btn() { function alt(e) { console.log('事件对象:', e.target); } return ( // 函数组件中使用事件 <button onClick={alt}>点我！</button> ) } // 函数组件 function FunctionHello() { function alt(e) { // 阻止浏览器得默认行为 e.preventDefault() console.log('事件对象:', e.target); } return ( <div><Btn></Btn>我是一个函数组件！</div> ) }
