React从入门到放弃新手入门必备

最新推荐文章于 2024-09-03 17:02:58 发布

孙德海

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量179

点赞数 1

分类专栏： web前端文章标签： javascript css reactjs css3 es6

本文链接：https://blog.csdn.net/sdh19981202/article/details/108854590

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

React

react的特点

react特点：
    2013.5 facebook   16.13.1版本  
    fiber协调算法  采用分片思想  解决组件同步的更新导致浏览器卡顿问题
    声明式   组件化   一次学习，随处变化
    vue是一个完整的mvvm框架，react只是一个mvc中的view视图层框架

简单的hello world案例

 npm init -y 创建一个package.json配置文件
  npm i react react-dom babel-standlone -S
  从node_modules/react/umd/xxx找到文件放入到js目录中

  index.html文件分别引入react/react-dom/babel
  后续要进行jsx代码的解析，需要引入bable，还得将默认的type="text/javascript" ===> type="text/babel" 才可以
  
    代码：  ReactDOM.render(<h2>我是h2标题哦...</h2>,document.querySelector("#app"))

jsx

JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编译的过程:

JSX代码 — > 使用react构造组件，bable进行编译—> JavaScript对象 — `ReactDOM.render()函数进行渲染`—>真实DOM元素 —>插入页面

这个方法就是将jsx代码编译的虚拟dom将其渲染成真实dom节点
        ReactDOM.render(a,document.querySelector("#app"))

注意：

1.标签必须要闭合，例如 <input/ >

2.jsx遵循只能有一个根元素

数组遍历

    react中需要遍历数组，采用map方法进行迭代遍历 （ v-for="(item,index) in arr"）
    key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
    key 相同可以实现复用，但是需要注意，key尽量不要使用index，除非你知道这个下标不变的。

面试题

  key? 原因？ index不能用？遍历数组，如何给定唯一的key? 
  (自己定制数组结构，jsonArray套json对象，给每个json对象赋予唯一的id字段，key={item.id})

<div id="app"></div>
    <script type="text/babel">
        let arr = [{id:1,msg:"1"},{id:2,msg:"2"},{id:3,msg:"2"},{id:4,msg:"4"}]

    
        ReactDOM.render(<ul>
            {
                arr.map((item,index)=>{
                    return <li key={item.id}>{item.msg}</li>
                })
            }
        </ul>,document.querySelector("#app"))

    </script>

React的style用法

给jsx代码中添加样式，需要将class（保留字） ==> className形式！
给jsx代码中添加内联样式，style={ {} }

    <style>
        .red{
            color:red
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let style = {background:"green",transform:"rotate(30edeg)"}
        const a = 
        <div>
            <p className="red" style={style}>Gordon-Liu</p>
        </div>
        ReactDOM.render(a,document.querySelector("#app"))
    </script>

封装数组的遍历

封装该函数的时候需要将其通过内部的return返回遍历后的新数组，否则浏览器默认返回undefined，不会被浏览器渲染

<div id="app"></div>
<script type="text/babel">
    let arr = [10, 20, 30]
    let arr2 = ["a","b","c"]
    function showList(arr){
        return arr.map((item,index)=>{
            return <p key={index}>{item}</p>
        })
    }
    const a = 
        <div>
            {showList(arr)}
            {showList(arr2)}
        </div>
        // <div>
        //     {
        //         arr.map((item,index)=>{
        //             return <p key={index}>{item}</p>
        //         })
        //     }   
        //     {
        //         arr2.map((item,index)=>{
        //             return <p key={index}>{item}</p>
        //         })
        //     }    
        // </div>
    ReactDOM.render(a,document.querySelector("#app"))
</script>

数据改变后再次调用渲染真实dom

return后面返回一段jsx代码的时候，建议后面需要添加()
因为return解析当前行的代码，若后面没代码，那就为空
React只是一个view视图层框架，又不是完整的mvvm框架。当数据改变，视图肯定不会更新。
那么就需要给渲染真实dom的时候封装一个函数，在更改数据后再调用一次，使页面数据进行更新

    <style>
        .red{
            color:red
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let arr = [10, 20, 30, 40, 50]
        let arrIndex = 0
        function show(arr){
            return arr.map((item,index)=>{
                return <p 
                    key={index} 
                    className={ arrIndex === index ? "red" : ""}
                    onClick={ ()=>{arrIndex = index; render()} }
                >{item}</p>
            })   
        }
        
        render()
        function render(){
            const a = 
            <div>
                {
                    show(arr)
                }    
            </div>
            ReactDOM.render(a,document.querySelector("#app"))
        }
    </script>

函数式组件与类组件

React中定义组件的两种形式：
函数式组件（无状态组件）
    const 组件名(首字母大写)=（props）=>{
        return jsx表达式             
    }

类组件
    class 组件名  extends  React.Component {
        render(){ //render是必不可少的钩子函数
            return jsx表达式
        }
    }

函数式组件接受形参

函数式组件内部不能访问this,通过参数props可以接受外部传入的属性。
如果外部传入的属性需要是number类型，age={number值}

<div id="app"></div>
<script type="text/babel">
    const App = props =>{
        return (
            <div>
                {/*我叫Gordon-Liu ===  {props.sex} === {props.name} === {props.age}*/}
                {/*我叫Gordon-Liu === {props.a.sex} === {props.b.name} === {props.b.age}*/}
                我叫Gordon-Liu === {props.sex} === {props.name}      {/*后面声明的变量将前面的覆盖了*/}
            </div>
        )
    }
    let a ={
        sex:"男",
        name:"lisi"
    }
    let b = {
        name :"zhangsan ",
        age:10
    }
    // ReactDOM.render(<App sex={"男"} name={"lisi"} age={10} />,document.querySelector("#app"))
    // ReactDOM.render(<App a={a} b={b} />,document.querySelector("#app"))
    ReactDOM.render(<App {...a} {...b} />,document.querySelector("#app"))       //展开后的样子就是第一种
</script>

类组件接受形参

在类组件中，通过this就可以获取到组件的实例本身，其中this.props.xxx就可以获取到外部传入的属性值了

<div id="app"></div>
<script type="text/babel">
    class App extends React.Component{
        render(){
            return (
                <div>
                    my name is === {this.props.a.name} === {this.props.sex} === {this.props.age}
                </div>
            )
        }
    }
    let a = {
        name:"zhangsan"
    }
    let b = {
        age:20
    }
    ReactDOM.render(<App sex={"man"} a={a} {...b} />,document.querySelector("#app"))
</script>

对象的处理

找出对象的键：Object.keys(json).map(xxxx)

<div id="app"></div>
<script type="text/babel">
    let obj = {a:1,b:2,c:3,d:4}
    class App extends React.Component{
        render(){
            return (
                <div>
                    {
                        Object.keys(obj).map((item)=>{
                            return <p key={item}>{item}:{obj[item]}</p>
                        }) 
                    }   
                </div>
            )
        }
    }
    ReactDOM.render(<App/>,document.querySelector("#app"))
</script>

孙德海

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React从入门到放弃新手入门必备

Reactreact的特点react特点： 2013.5 facebook 16.13.1版本 fiber协调算法采用分片思想解决组件同步的更新导致浏览器卡顿问题声明式组件化一次学习，随处变化 vue是一个完整的mvvm框架，react只是一个mvc中的view视图层框架简单的hello world案例 npm init -y 创建一个package.json配置文件 npm i react react-dom babel-stan
复制链接

扫一扫