React笔记-React入门

这篇具有很好参考价值的文章主要介绍了React笔记-React入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

几个关键的库

React底层核心:react.development.js

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

解析ES6语法:babel.min.js

React.createElement() //创建元素

如创建一个节点:

let hello = ReactDOM.createElement('h1', {}, 'Hello World')

ReactDOM.render() //渲染元素

如:

ReactDOM.render(hello, document.getElementById('app1'))

或如:

<script type = "text/babel">

    ReactDom.render(

   <h1>Hello World</h1>

    document.getElementById('app');

   )

</script>

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

添加Class

<style>

.yellow{

   Color: yellow;

}

</style>

ES5:

let hello = React.createElement(

'h1',

{

   className: 'yellow'

},

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

)

ES6:

let world = 'world'

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

ReactDOM.render(

    template,

    Document.getElementById('app')

)

元素渲染(数据动态更新)

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.属性。文章来源地址https://www.toymoban.com/news/detail-649174.html

无状态组建

<div id="app1"></div>

<script type="text/babel">

//函数式组建

function Hello(){

   return <h1>Hello World</h1>

}

ReactDOM.render(

   <Hello/>,

    Document.getElementById('app1')

)

</script>

如props传值(无状态组建)

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

如有状态组建

<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传值(有状态组件)

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

事件处理

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

列表渲染

<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的使用

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

列表循环

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

条件处理

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

优化写法

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

条件&事件处理

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

到了这里,关于React笔记-React入门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(59)
  • Web前端 Javascript笔记3

     内存中的生命周期         1、内存分配         2、内存使用(读写)         3、内存回收,使用完毕之后,垃圾回收器完成         内存泄漏:该回收的,由于某些未知因素,未释放,叫做内存泄漏 栈:数据存在其中会自动释放 堆:对象,根据程序员的操作来决定释

    2024年04月15日
    浏览(46)
  • web前端javaScript笔记——(11)DOM

    属性                                     此事件发生在何时 onabort 图像的加载被中断。 onblur                                   元素失去焦点。 anchange                                 域的内容被改变 onclick  当用户点击某

    2024年01月19日
    浏览(57)
  • web前端javascript笔记——(13)事件(1)

    鼠标/键盘属性 altKey               返回当事件被触发时,“ALT”是否被按下。 button               返回当事件被触发时,哪个鼠标按钮被点击 clientX               返回当事件被触发时,鼠标指针的水平坐标。 clientY               返回当事件被触

    2024年01月25日
    浏览(50)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(62)
  • 〖大前端 - 基础入门三大核心之JS篇㉓〗- JavaScript 的「数组」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月04日
    浏览(67)
  • [前端系列第3弹]JS入门教程:从零开始学习JavaScript

    本文将带领大家,从零开始学习JavaScript,fighting~ 目录 一、JavaScript简介 二、变量和数据类型 三、注释和分号 四、算术运算符 五、表达式和语句 六、代码块和作用域 七、函数(最重要)          JavaScript(简称JS)是一种运行在浏览器中的脚本语言,它可以让网页变得

    2024年02月13日
    浏览(57)
  • 〖大前端 - 基础入门三大核心之JS篇㉟〗- JavaScript 的DOM简介

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(53)
  • 【JavaEE初阶】前端第四节.JavaScript入门学习笔记

    作者简介:大家好,我是未央; 博客首页:未央.303 系列专栏:Java测试开发 每日一句:人的一生,可以有所作为的时机只有一次,那就是现在!!! 前言 一、前置知识  1、JS 和 HTML 和 CSS 之间的关系 1.2 JS 的书写形式 1.2.1 内嵌式 1.2.2 行内式  1.2.3 外部式 1.2.4 扩展 1.2

    2024年02月08日
    浏览(46)
  • JavaScript之React

    前言 React 是一个用于构建用户界面的 JavaScript 库,由 Facebook 开发。它可以让开发者编写可重复使用的 UI 组件,并且可以自动地更新 UI。React 的运行原理可以分为两个部分:虚拟 DOM 和组件更新。 虚拟 DOM React 使用虚拟 DOM 来代表实际的 DOM 树。虚拟 DOM 是一个轻量级的 JavaSc

    2024年02月06日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包