位置: IT常识 - 正文
React入门笔记(react 入门)
编辑：rootadminReact入门笔记 1、React入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <div id="app"></div> <script type="text/babel"> ReactDOM.render( <h1>hello world2</h1>, document.getElementById('app') ) </script></body></html>2、JSX语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <div id="app"></div> <script type="text/babel"> let a = '变量a' ReactDOM.render( <h1 className="h1">{a}</h1>, document.getElementById('app') ) </script></body></html>3、元素渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><style> .red{ color: red; }</style><body> <div id="app"></div> <script type="text/babel"> function test(){ //只会渲染变动的地方，而不会像js操作dom一样全部修改 let time = new Date().toLocaleTimeString() let template = <div> <h1 className="red">现在时间是</h1> <h2> {time} </h2> </div> ReactDOM.render( template, document.getElementById('app') ) } setInterval(test,1000) </script></body></html>4、组件和props传值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --></body></html>5、函数式组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="app1"></div> <script type="text/babel"> // 函数式组件 // function Hello(){ // return <h1>Hello World</h1> // } //多个元素一定要记得写根元素 function Hello(){ return <div> <h1>Hello World</h1> <h1>Hello World</h1> <h1>Hello World</h1> </div> } ReactDOM.render( <Hello/>, document.getElementById('app1') ) </script></body></html>6、函数是组件和props传值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="app1"></div> <script type="text/babel"> // 函数式组件 // function Hello(){ // return <h1>Hello World</h1> // } //多个元素一定要记得写根元素 function Temp(props){ return <div> <h1>函数式组件，使用props传值</h1> <h1>姓名：{props.name}</h1> <h1>年龄: {props.age}</h1> </div> } ReactDOM.render( <Temp name='小明' age='18'/>, document.getElementById('app1') ) </script></body></html>7、有状态组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ render(){ return <h1>Hello World</h1> } } ReactDOM.render( <Hello />, document.getElementById('root') ) </script></body></html>8、有状态组件props<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ render(){ return <div> <h1>Hello World</h1> <p>姓名：{this.props.name}</p> <p>性别：{this.props.age}</p> </div> } } ReactDOM.render( <Hello age="18" name="小明"/>, document.getElementById('root') ) </script></body></html>9、事件处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ constructor(props){ super(props) this.state = { name: "小李", age: 18 } } updateInfor = ()=>{ this.setState({ name: 'hello', age: 13 }) } render(){ return <div> <h1>Hello World</h1> <p>姓名：{this.state.name}</p> <p>性别：{this.state.age}</p> <button onClick={this.updateInfor}>更新数据</button> </div> } } ReactDOM.render( <Hello/>, document.getElementById('root') ) </script></body></html>10、事件处理this详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ constructor(props){ super(props) this.state = { name: "小李", age: 18 } this.updateInfor1 = this.updateInfor1.bind(this) } updateInfor = ()=>{ this.setState({ name: 'hello', age: 13 }) } updateInfor1(){ this.setState({ name: 'hello', age: 13 }) } updateInfor2(){ this.setState({ name: 'hello', age: 13 }) } render(){ return <div> <h1>Hello World</h1> <p>姓名：{this.state.name}</p> <p>性别：{this.state.age}</p> {/* <button onClick={this.updateInfor}>更新数据</button> */} <button onClick={this.updateInfor1}>更新数据</button> <button onClick={this.updateInfor2.bind(this)}>更新数据</button> </div> } } ReactDOM.render( <Hello/>, document.getElementById('root') ) </script></body></html>11、列表渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ state = { list: [1,2,3,4,5] } render(){ const arr = this.state.list const lists = [] arr.forEach(i=>{ let li = <li> {arr[i-1]} </li> lists.push(li) }) return <div> <ul> {lists} </ul> </div> } } ReactDOM.render( <Hello/>, document.getElementById('root') ) </script></body></html>12、循环需要key<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> class Hello extends React.Component{ state = { list: [1,2,3,4,5] } render(){ const arr = this.state.list const lists = [] arr.map((item, index)=>{ let li = <li key={index}> {item} </li> lists.push(li) }) return <div> <ul> {lists} </ul> </div> } } ReactDOM.render( <Hello/>, document.getElementById('root') ) </script></body></html>13、条件处理1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> function Login(){ return <button> Login </button> } function Logout(){ return <button> Logout </button> } class Hello extends React.Component{ state = { isLogin:true } render(){ const isLogin = this.state.isLogin let button if(isLogin){ button = Logout() }else{ button = Login() } return <div> {button} </div> } } ReactDOM.render( <Hello/>, document.getElementById('root') ) </script></body></html>14、条件处理2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> function Login(){ return <button> Login </button> } function Logout(){ return <button> Logout </button> } class Hello extends React.Component{ state = { isLogin:true } render(){ const {isLogin} = this.state let button return <div> {isLogin ? <Login/> : <Logout/>} </div> } } ReactDOM.render( <Hello/>, document.getElementById('root') ) </script></body></html>15、条件处理和事件处理组合<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <title>Document</title></head><body> <!-- React中的组件分为：无状态组件（函数式组件）和有状态组件（React.Component） 无状态组件：直接定义函数的形式，不存在state，只会有props，它没有生命周期 有状态组件：使用class定义，extend继承，由state进行数据的存储和管理，同时还可以有props，有生命周期 传值的时候有状态组件取用的是this.state.属性或者是this.props.属性 无状态组件的话使用的是props.属性 --> <div id="root"></div> <script type="text/babel"> function Login(){ return <button> Login </button> } function Logout(){ return <button> Logout </button> } class Hello extends React.Component{ state = { isLogin:false } updataInfo = ()=>{ this.setState({ isLogin:!this.state.isLogin }) } render(){ const {isLogin} = this.state let button return <div> {isLogin ? <Login/> : <Logout/>} <button onClick={this.updataInfo}>更新数据</button> </div> } } ReactDOM.render( <Hello/>, document.getElementById('root') ) </script></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/300193.html
转载请保留说明！
上一篇：Redis高频面试题汇总(上)(redis面试必会6题经典)
