React笔记-React入门

IT19952023-08-14 11:24

主要是现在要改一个开源项目，需要学习下React入门，在此记录一下。

几个关键的库

React底层核心：react.development.js

React操作DOM库：react-dom.development.js

解析ES6语法：babel.min.js

React.createElement() //创建元素

如创建一个节点：

javascript 复制代码 
let hello = ReactDOM.createElement('h1', {}, 'Hello World')

ReactDOM.render() //渲染元素

如：

javascript 复制代码 
ReactDOM.render(hello, document.getElementById('app1'))

或如：

javascript 复制代码 
<script type = "text/babel">

    ReactDom.render(

   <h1>Hello World</h1>

    document.getElementById('app');

   )

</script>

React.Component //创建组建，使用extends继承

添加Class

css 复制代码 
<style>

.yellow{

   Color: yellow;

}

</style>

ES5：

javascript 复制代码 
let hello = React.createElement(

'h1',

{

   className: 'yellow'

},

ReactDOM.render(hello, document.getElementById('app'));

)

ES6：

javascript 复制代码 
let world = 'world'

let hello = <h1 className="yellow">Hello {world}</h1>

ReactDOM.render(

    template,

    Document.getElementById('app')

)

元素渲染（数据动态更新）

javascript 复制代码 
function tick(){



   let time = new Date().toLocaleTimeString();

   let template = <div>

   <h1 className="red">Hello world</h1>

   <h2>现在是: {time}</h2>

   </div>

    ReactDOM.render(

        template,

        Document.getElementById('app')

   )

}



setInterval(tick, 1000)

组件

React中组件：

无状态组件（函数式组件）：

①直接定义函数的形式，不存在state，只会有props，没有生命周期；

②只展示不修改用无状态组件；

③传值时无状态组件取值用props.属性。

有状态组件（React.Component）：

①使用class定义，extends继承，有state进行数据的存储和管理，还可以用props，有生命周期；

②不仅仅展示，还要修改，用无状态组建。

③传值时有状态组件取值用this.state或this.props.属性。

无状态组建

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

//函数式组建

function Hello(){

   return <h1>Hello World</h1>

}

ReactDOM.render(

   <Hello/>,

    Document.getElementById('app1')

)

</script>

如props传值（无状态组建）

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

//函数式组建

function Hello(){

   return <div>

   <h1>姓名：{props.name}</h1>

   <h2>年龄：{props.age}</h1>

   </div>

}

ReactDOM.render(

   <Hello name="it1995" age="18" />,

    Document.getElementById('app1')

)

</script>

如有状态组建

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

class Hello extends React.Component {

//有状态组建需要使用render方法，是生命周期的底层方法

   render(){

       return <h1>Hello World</h1>

   }

}



ReactDOM.render(

   <Hello/>,

    document.getElementById('app1')

)



</script>

如props传值（有状态组件）

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

class Hello extends React.Component {

//有状态组建需要使用render方法，是生命周期的底层方法

   render(){

       return <div>

       <h1>姓名：{this.props.name}</h1>

       <h1>年龄：{this.props.age}</h1>

       </div>

   }

}



ReactDOM.render(

   <Hello name="it1995" age="18"/>,

    document.getElementById('app1'')

)



</script>

事件处理

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

class Hello extends React.Component {



   constructor(props){



       super(props) //需要先让父类先处理下

       this.state = { //这种情况，只能放到this.state中

           name: 'it1995',

       age: 20

   }

       this.updateInfo = this.updateInfo.bind(this)

   }



   updateInfo = () =>{



       this.setState({ //这里必须用setState

           name: 'it1995',

           age: 18

       })

   }



   updateInfo2(){ //如果这样定义函数



       this.setState({ //这里必须用setState

           name: 'it1995',

           age: 18

       })

   }



   updateInfo3(){ //如果这样定义函数



       this.setState({ //这里必须用setState

           name: 'it1995',

           age: 18

       })

   }



   updateInfo4(){ //如果这样定义函数



       this.setState({ //这里必须用setState

           name: 'it1995',

           age: 18

       })

   }







//有状态组建需要使用render方法，是生命周期的底层方法

   render(){

       return <div>

                   <h1>姓名：{this.state.name}</h1>

                   <h1>年龄：{this.state.age}</h1>

                   <button onClick={this.updateInfo}>更新数据</button>

                   <button onClick={this.updateInfo2}>更新数据</button>

                   <button onClick={()=>this.updateInfo3()}>更新数据</button>

                   <button onClick={this.updateInfo4()}>更新数据</button>

           </div>

   }

}



ReactDOM.render(

   <Hello name="it1995" age="18"/>,

    document.getElementById('app1')

)



</script>

列表渲染

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

class Hello extends React.Component {

    state = {

       list: [1, 2,3,4,5]

   }

//有状态组建需要使用render方法，是生命周期的底层方法

   render(){

       const arr = this.state.list

       const lists = []

       for(let i = 0; i < arr.length; i++){

           let li = <li>{arr[i]}</li>

            lists.push(li)

       }

       return <div>

       <ul>

       {lists}

       </ul>

       </div>

   }

}



ReactDOM.render(

<Hello />,

    document.getElementById('app1')

)



</script>

循环Key的使用

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

class Hello extends React.Component {

    state = {

       list: [1, 2,3,4,5]

   }

//有状态组建需要使用render方法，是生命周期的底层方法

   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('app1')

)



</script>

列表循环

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

class Hello extends React.Component {

    state = {

       list: [

           {id: 1, txt: "Java"},

           {id: 2, txt: "C/C++"},

           {id: 3, txt: "JavaScript"}

]

}

//有状态组建需要使用render方法，是生命周期的底层方法

render(){

   const arr = this.state.list

   const lists = []

    arr.map((item, index) => {



       let li = <li key={index.id}>{item.txt}</li>

        lists.push(li);

   })

   return <div>

   <ul>

   {lists}

   </ul>

   </div>

}

}



ReactDOM.render(

<Hello />,

    document.getElementById('app1')

)



</script>

条件处理

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

function Login(){

   return <button>Login</button>

}



function Logout(){

   return <button>Logout</button>

}



class App extends React.Component {

    state = {

       isLogin: true

   }

//有状态组建需要使用render方法，是生命周期的底层方法

   render(){



       const {isLogin} = this.state

       return <div>

       {isLogin ? <Login/> : <Logout/>}

   </div>

   }

}



ReactDOM.render(

<App/>,

    document.getElementById('app1')

)



</script>

优化写法

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

function Login(){

   return <button>Login</button>

}



function Logout(){

   return <button>Logout</button>

}



class App extends React.Component {

    state = {

       isLogin: true

   }

//有状态组建需要使用render方法，是生命周期的底层方法

   render(){



       const isLogin = this.state.isLogin

       let button

       if(isLogin)

            Button = <Login/>

   else

        Button = <Logout/>

       return <div>

       {button}

       </div>

   }

}



ReactDOM.render(

<App/>,

    document.getElementById('app1')

)



</script>

条件&事件处理

javascript 复制代码 
<div id="app1"></div>

<script type="text/babel">

function Login(){

   return <button>Login</button>

}



function Logout(){

   return <button>Logout</button>

}



class App extends React.Component {

    state = {

       isLogin: true

   }



   updateInfo1 = () =>{

       this.setState({

           isLogin: !this.state.isLogin

       })

   }



   updateInfo2(){



       this.setState({

           isLogin: !this.state.isLogin

       })

   }



//有状态组建需要使用render方法，是生命周期的底层方法

   render(){



       const isLogin = this.state.isLogin

       return <div>

       {isLogin ? <Login/> : <Logout/>}

   <button onClick={this.updateInfo1}>更新数据</button>

           <button onClick={this.updateInfo2.bind(this)}>更新数据</button>

           </div>

   }

}



ReactDOM.render(

<App/>,

    document.getElementById('app')

)



</script>
相关推荐
Nu11PointerException1 分钟前
JAVA笔记 | ResponseBodyEmitter等异步流式接口快速学习
笔记·学习
亦枫Leonlew1 小时前
三维测量与建模笔记 - 3.3 张正友标定法
笔记·相机标定·三维重建·张正友标定法
考试宝2 小时前
国家宠物美容师职业技能等级评价（高级）理论考试题
经验分享·笔记·职场和发展·学习方法·业界资讯·宠物
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
黑叶白树3 小时前
简单的签到程序 python笔记
笔记·python
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04Macbook pro M1 安装Ubuntu教程05基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测06【经验分享】Ubuntu22.04安装微信(linux官方版)07文件或文件夹名称中有空格如何批量去除08RAG 实践- Ollama+RagFlow 部署本地知识库09Windows10安装PCL1.14.0及点云配准10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解