02React的组件与state

最新推荐文章于 2024-09-30 15:23:15 发布

南瑜呀

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量229

点赞数

分类专栏：总结文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/m0_63757700/article/details/129906517

版权

总结专栏收录该内容

57 篇文章 1 订阅

订阅专栏

1.函数式组件

适用于简单组件的构建，同时方法名称首字母必须大写，区分普通html标签。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_函数式组件</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
//1.创建函数式组件
    function MyComponent() {
console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
        return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
    }

//2.渲染组件到页面
    ReactDOM.render(<MyComponent/>, document.getElementById('test'))
/*
        执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
                1.React解析组件标签，找到了MyComponent组件。
                2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
    */
</script>
</body>
</html>

2.类式组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>类式组件</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        //1.创建类式组件,如果在React中采用类式组件必须继承于React中的Component
        class MyComponent extends React.Component{
            render() {
                //render是放在哪里的？--类（这里指的是MyComponent）的原型对象上，供实例使用
                return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
            }
        }
        //2.渲染组件到页面上
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        /* 
         执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
               1.React解析组件标签，找到了MyComponent组件。
               2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
               3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
       */
    </script>
</body>

</html>

3.组件实例的核心属性state

state可以理解为：state是组件对象最重要的属性，值是对象(可以包含多个key—value组合)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
//1.创建组件
    class Weather extends React.Component {

//构造器调用几次？ ———— 1次
        constructor(props) {
			console.log('constructor');
			super(props)
//初始化状态
            this.state = {isHot: false, wind: '微风'}
//解决changeWeather中this指向问题
            this.changeWeather = this.changeWeather.bind(this)
        }

//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
        render() {
			console.log('render');
//读取状态
            const {isHot, wind} = this.state
            return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
        }

		//changeWeather调用几次？ ———— 点几次调几次
        changeWeather() {
		//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
       //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
      //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

            console.log('changeWeather');
	//获取原来的isHot值
            const isHot = this.state.isHot
   //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
            this.setState({isHot: !isHot})
			console.log(this);

   //严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
   //this.state.isHot = !isHot //这是错误的写法
        }
    }

//2.渲染组件到页面
    ReactDOM.render(<Weather/>, document.getElementById('test'))

</script>
</body>
</html>

react的绑定事件注意事项：

在React中，事件名称都是React中提供的，因此名称中on之后的单词的首字母需要大写。例如：onClick,onMouseOver。然后为事件提供处理函数如下：
```
<h1 onClick={function}>点我触发点击事件</h1>
```

4.解决类中的this指向

构造器中的this一定是类的实例对象,原型方法也一定是给实例调用的。实例调用方法那么方法中的this就是实例,类中方法都开启了局部严格模式所以this都是undefine。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
//1.创建组件
    class Weather extends React.Component {

//构造器调用几次？ ———— 1次
        constructor(props) {
			super(props)
//初始化状态
            this.state = {isHot: false, wind: '微风'}
//解决changeWeather中this指向问题,其实就是改变this指向
            this.changeWeather = this.changeWeather.bind(this)
        }
//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
        render() {
			console.log('render');
//读取状态
            const {isHot, wind} = this.state
            return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
        }
//changeWeather调用几次？ ———— 点几次调几次
        changeWeather() {
//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
            console.log('changeWeather');
//获取原来的isHot值
            const isHot = this.state.isHot
//注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
            this.setState({isHot: !isHot})

//注意：状态(state)不可直接更改，下面这行就是直接更改！！！
        }
    }
//2.渲染组件到页面
    ReactDOM.render(<Weather/>, document.getElementById('test'))
</script>
</body>
</html>