学习react基础(3)_setState、state、jsx、使用ref的几种形式

最新推荐文章于 2022-11-08 16:30:35 发布

六卿

最新推荐文章于 2022-11-08 16:30:35 发布

阅读量905

点赞数 1

分类专栏： # react 文章标签： react.js refs jsx

本文链接：https://blog.csdn.net/qq_43291759/article/details/120722923

版权

react 专栏收录该内容

48 篇文章 3 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、this.setState和this.state的区别？
二、react核心
总结

前言

学习react

一、this.setState和this.state的区别？

常常将this.setState称为状态机，因为它在控制着我们类组件的状态，并且可以更改状态，改完之后还可以是页面中的数据也发生变化。而使用this.state对属性赋值只会改变数据并不会改变页面中展示的数据。
所以我们想通过改变数据从而改变页面的时候我们需要使用状态机来改变。

二、react核心

1.核心库

想使用react这个框架，我们并非需要使用脚手架来搭建，我们可以在html中引入它的两个核心库就可以将页面展示出来。

react
react-dom
babel

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  </head>
  <body>
    <div id="zjq"></div>
  </body>
  <script type="text/babel">
        class  Zjq extends React.Component{
            render(){
                return (
                    <div>
                        zjq
                    </div>
                )
            }
        }
    ReactDOM.render(<Zjq/>, document.getElementById("zjq"));
  </script>
</html>

在这里插入图片描述
使用react-dom库中的render方法将Zjq组件渲染到了id为zjq的dom元素上。
利用babel转换jsx至js，上面只是类组件的形式，类组件需要继承来自React.Component这个类，并给实例添加render方法，返回值就是要渲染的dom标签。

2.jsx

javascript xml
jsx：

虽然是在js中书写标签，但是我们不用给标签加引号，jsx能自动识别为标签。
标签中的表达式、变量都需要在{}中书写：{this.state.xxx}
内联样式需要 style={{height:“100px”}},相当于在{}中插入一个style对象
只能有一个跟标签
标签必须要闭合
标签首字符小写会转成html中同名元素
大写会自动查找自定义组件没有的话直接报错

3.class和function组件

在类组件中有状态和生命周期而function中没有，不过16.8版本中添加了hook。

react找到组件，判断calss组件还是function组件，class实例化组件调用自身render方法，function组件直接调用。
class组件中有this指向当前类实例，function中没有this
class中获取外界传来的props直接this.props
function中中获取外界传来的props直接使用函数第一个参数即可

4.事件

react重新对js原生的事件进行了封装，onclick---->onClick，onchange—>onChange等等，全部on开头的事件后面第一个字母都需要大写。

<script type="text/babel">
        class  Zjq extends React.Component{
            clickFun=()=>{
                console.log("object")
            }
            render(){
                return (
                    <div onClick={this.clickFun}>
                        zjq
                    </div>
                )
            }
        }
    ReactDOM.render(<Zjq/>, document.getElementById("zjq"));
  </script>

需要给类自身加属性我们使用static
props是只读的，不能修改

5.ref

字符串形式：

<script type="text/babel">
        class  Zjq extends React.Component{
            clickFun=()=>{
                console.log(this.refs.zjqRef)
            }
            render(){
                return (
                    <div onClick={this.clickFun} ref="zjqRef">
                        zjq
                    </div>
                )
            }
        }
    ReactDOM.render(<Zjq/>, document.getElementById("zjq"));
  </script>

回调函数形式

 <script type="text/babel">
        class  Zjq extends React.Component{
            myref =""
            clickFun=()=>{
                console.log(this.myref)
            }
            render(){
                return (
                    <div onClick={this.clickFun} ref={(ref)=>{this.myref = ref}}>
                        zjq
                    </div>
                )
            }
        }
    ReactDOM.render(<Zjq/>, document.getElementById("zjq"));
  </script>

createRef

<script type="text/babel">
        class  Zjq extends React.Component{
            myref =React.createRef()
            clickFun=()=>{
                console.log(this.myref.current)
            }
            render(){
                return (
                    <div onClick={this.clickFun} ref={this.myref}>
                        zjq
                    </div>
                )
            }
        }
    ReactDOM.render(<Zjq/>, document.getElementById("zjq"));
  </script>