react该学哪些知识？react的知识点总结（附完整实例）-js教程-PHP中文网

首页

web前端

js教程

react该学哪些知识？react的知识点总结（附完整实例）

寻∝梦

Sep 11, 2018 pm 04:01 PM

react react.js

本篇文章主要的介绍了关于react的学习，关于react的知识点总结，下面我们就开始阅读这篇文章的内容吧

正式开始react的学习

1、react中组件的首字母如果是大写就会当成自定义组件，如果是小写就会当成DOM的自带元素名。如果你自定义组件名称首字母是小写不会报错，但是无法显示。

2、自定义组件的return中最外层只能有一个节点。

3、编写的HTML中的{}中，不能有语句，可以有求值表达式。但是可以将语句写在函数中，然后在{}中调用函数。

4、函数名和标签名都使用驼峰命名。

5、使用htmlFor和className。比如 Name

6、样式的编写：可以在jsx中var style = {color:"red",backgroundColor:"blue"} 然后在自定义标签中添加style={style}　　记得使用驼峰命名法。

7、非DOM属性：

　　a、dangerouslySetInnerHTML：在JSX中直接插入HTML代码

　　b、ref：父组件引用子组件

　　c、key：提高渲染性能。diff算法

8、组件的各个生命周期中运行的函数：a、初始化。

b、运行中。

c、销毁。

9、属性的用法：

a、　　//给属性name赋值"abc"

b、

var props = {
　　one:"123",
　　two:"456"　　
}
<HelloWorld {...props}/>　　//展开语法相当于<HelloWorld one="123" two="456"}/>
c、var a = ReactDOM.render(<HelloWorld/>,document.body);

登录后复制

　a.setProps({name:"Tim"});　　//不建议这种用法，违背了React的设计原则（最新版貌似已经去掉了这个函数？console.log出来抓着原型链找了一遍都没有找到这个函数，只找到了setState）

10、状态的用法：

 var HelloWorld = React.createClass({             render:function(){                 return <p>Hello,{this.props.name||"world"}</p>             }         });         var HelloUniverse = React.createClass({             handleChange:function(e){                 this.setState({                     name:e.target.value                 });             },             getInitialState:function(){                 return {                     name:&#39;&#39;,                 }             },             render:function(){                 return <p>
                     <HelloWorld {...this.state}/>
                     <input type="text" onChange={this.handleChange} />
                 </p>             }         });         var a = ReactDOM.render(<HelloUniverse/>
         ,document.getElementById("root"));

登录后复制

11、属性和状态的相似点和区别

12、事件处理函数

13、事件对象的属性

14、组件协同使用

父子间的协同使用可以使用子组件调用父组件的方法。来达到这个目的，父组件通过prop的方式传递给子组件

 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
     <meta charset="UTF-8">
     <title>Hello,world</title>
     <script src="../demo01/build/react.js"></script>
     <script src="../demo01/build/react-dom.js"></script>
     <script src="../demo01/browser.min.js"></script>
 </head>
 <body>
     <p id= "root"></p>
     <script type="text/babel">         var GenderSelect = React.createClass({             render:function(){                 return <select name="gender" onChange={this.props.handleSelect}>
                     <option value="1">男</option>
                     <option value="0">女</option>
                 </select>             }         });         var SignupForm = React.createClass({             getInitialState:function(){                 return {                     name:&#39;&#39;,                     pwd:&#39;&#39;,                     gender:&#39;&#39;,                 }             },             handleChange:function(name,e){                 var newState = {}                 newState[name] = e.target.value;                 this.setState(newState);             },             handleSelect:function(e){                 this.setState({gender:e.target.value});             },             render:function(){                 console.log(this.state)                 return <form>
                     <input type="text" onChange={this.handleChange.bind(this,&#39;name&#39;)}/>
                     <input type="text" onChange={this.handleChange.bind(this,&#39;pwd&#39;)}/>
                     <GenderSelect handleSelect={this.handleSelect}/>
                 </form>             }         });         var a = ReactDOM.render(<SignupForm />,document.getElementById("root"));
     </script>
 </body>
 </html>

登录后复制

父子组件交互（想看更多就到PHP中文网React参考手册栏目中学习）

兄弟组件之间可以用过子组件A传到父组件，父组件再传递到子组件B的方式来实现。

15、mixin

 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
     <meta charset="UTF-8">
     <title>Hello,world</title>
     <script src="../demo01/build/react.js"></script>
     <script src="../demo01/build/react-dom.js"></script>
     <script src="../demo01/browser.min.js"></script>
 </head>
 <body>
     <p id= "root"></p>
     <script type="text/babel">         var SetInit = {             handleClick:function(e){                 console.log(e.target.value);             }         }         var Hello = React.createClass({             //这里命名必须为mixins
             mixins:[SetInit],             render:function(){                 return <input type="button" onClick={this.handleClick} value="123123"/>             }         });         var a = ReactDOM.render(<Hello />,document.getElementById("root"));
     </script>
 </body>
 </html>

登录后复制

mixin实例

优点和缺点：

 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
     <meta charset="UTF-8">
     <title>Hello,world</title>
     <script src="../demo01/build/react.js"></script>
     <script src="../demo01/build/react-dom.js"></script>
     <script src="../demo01/browser.min.js"></script>
 </head>
 <body>
     <p id= "root"></p>
     <script type="text/babel">         var BindingMixin = {             handleChange:function(name){                 var that = this;                 return function(e){                     var news = {};                     news[name] = e.target.value;                     that.setState(news);                 }             }         };         var Example = React.createClass({             //这里命名必须为mixins
             mixins:[BindingMixin],             getInitialState:function(){                 return {                     text:&#39;&#39;                 }             },             render:function(){                 return <p>
                     <input type="text" onChange={this.handleChange(&#39;text&#39;)} />
                     <p>{this.state.text}</p>
                 </p>             }         });         var a = ReactDOM.render(<Example />,document.getElementById("root"));
     </script>
 </body>
 </html>

登录后复制

mixin

16、可控组件和不可控组件

可控组件就是value值没有写死的，比如value={this.state.value}。

不可控则反之。

尽量使用可控组件

碰到的问题：

1、在wepack.config.js配置项中，因为module中的loader是多个配置项，所以应该是loaders，但是我写的是loader，导致后面的配置项没有生效，出现了很多编译问题。。。

2、在组件的render中return的标签，结尾的标签忘记打/，比如

写成了

react就识别成了两个p标签，就会报embedded: Unterminated JSX contents.

3、render中所有的非成对标签，必须将标签闭合，比如：
否则会报错:embedded: Expected corresponding JSX closing tag for

4、很有意思的一个东西，如果我在某个函数中setState了某个属性，那么紧接着马上打印出来这个属性是不会有正确的结果的。要在componentDidUpdate函数中，也就是等组件更新完以后再打印出来才是正确的结果。

5、如果在父组件中更新了子组件的prop，请不要将这个prop放入getInitialState函数中当做属性，因为如果更新了prop的话，子组件是不会更新state中的属性（可以查看11当中的表）。

6、如果使用的是es6的语法，也就是采用继承React.Component的方法来构建组件的话，就不能使用getInitialState()函数，会报警告 Warning: getInitialState was defined on TodoApp, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

解决方法：设置constructor

constructor(props){
　　super(props);
      this.state = {
　　　　example:&#39;example&#39;,
　　}
}

登录后复制

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

以上是react该学哪些知识？react的知识点总结（附完整实例）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7471

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何利用React和WebSocket构建实时聊天应用 Sep 26, 2023 pm 07:46 PM

如何利用React和WebSocket构建实时聊天应用引言：随着互联网的快速发展，实时通讯越来越受到人们的关注。实时聊天应用已经成为现代社交和工作生活中不可或缺的一部分。本文将介绍如何利用React和WebSocket构建一个简单的实时聊天应用，并提供具体的代码示例。一、技术准备在开始构建实时聊天应用之前，我们需要准备以下技术和工具：React：一个用于构建

React前后端分离指南：如何实现前后端的解耦和独立部署 Sep 28, 2023 am 10:48 AM

React前后端分离指南：如何实现前后端的解耦和独立部署，需要具体代码示例在当今的Web开发环境中，前后端分离已经成为一种趋势。通过将前端和后端代码分开，可以使得开发工作更加灵活、高效，并且方便进行团队协作。本文将介绍如何使用React实现前后端分离，从而实现解耦和独立部署的目标。首先，我们需要理解什么是前后端分离。传统的Web开发模式中，前端和后端是耦合在

如何利用React和Flask构建简单易用的网络应用 Sep 27, 2023 am 11:09 AM

如何利用React和Flask构建简单易用的网络应用引言：随着互联网的发展，网络应用的需求也越来越多样化和复杂化。为了满足用户对于易用性和性能的要求，使用现代化的技术栈来构建网络应用变得越来越重要。React和Flask是两种在前端和后端开发中非常受欢迎的框架，它们可以很好的结合在一起，用来构建简单易用的网络应用。本文将详细介绍如何利用React和Flask

如何利用React和RabbitMQ构建可靠的消息传递应用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ构建可靠的消息传递应用引言：现代化的应用程序需要支持可靠的消息传递，以实现实时更新和数据同步等功能。React是一种流行的JavaScript库，用于构建用户界面，而RabbitMQ是一种可靠的消息传递中间件。本文将介绍如何结合React和RabbitMQ构建可靠的消息传递应用，并提供具体的代码示例。RabbitMQ概述：

React响应式设计指南：如何实现自适应的前端布局效果 Sep 26, 2023 am 11:34 AM

React响应式设计指南：如何实现自适应的前端布局效果随着移动设备的普及和用户对多屏幕体验的需求增加，响应式设计成为了现代前端开发的重要考量之一。而React作为目前最流行的前端框架之一，提供了丰富的工具和组件，能够帮助开发人员实现自适应的布局效果。本文将分享一些关于使用React实现响应式设计的指南和技巧，并提供具体的代码示例供参考。使用React的Fle

React代码调试指南：如何快速定位和解决前端bug Sep 26, 2023 pm 02:25 PM

React代码调试指南：如何快速定位和解决前端bug引言：在开发React应用程序时，经常会遇到各种各样的bug，这些bug可能使应用程序崩溃或导致不正确的行为。因此，掌握调试技巧是每个React开发者必备的能力。本文将介绍一些定位和解决前端bug的实用技巧，并提供具体的代码示例，帮助读者快速定位和解决React应用程序中的bug。一、调试工具的选择：在Re

React Router使用指南：如何实现前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南：如何实现前端路由控制随着单页应用的流行，前端路由成为了一个不可忽视的重要部分。ReactRouter作为React生态系统中最受欢迎的路由库，提供了丰富的功能和易用的API，使得前端路由的实现变得非常简单和灵活。本文将介绍ReactRouter的使用方法，并提供一些具体的代码示例。安装ReactRouter首先，我们需

如何利用React和Google BigQuery构建快速的数据分析应用 Sep 26, 2023 pm 06:12 PM

如何利用React和GoogleBigQuery构建快速的数据分析应用引言：在当今信息爆炸的时代，数据分析已经成为了各个行业中不可或缺的环节。而其中，构建快速、高效的数据分析应用则成为了许多企业和个人追求的目标。本文将介绍如何利用React和GoogleBigQuery结合起来构建快速的数据分析应用，并提供详细的代码示例。一、概述React是一个用于构建

See all articles

react该学哪些知识？react的知识点总结（附完整实例）

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题