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

寻∝梦 原创: 2018-09-11 16:01:50 1184浏览

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

正式开始react的学习

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

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

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

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

5、使用htmlFor和className。比如 <label htmlFor="name" className="red">Name</label>

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、<HelloWorld name="abc"/>　　//给属性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:'',                 }             },             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:'',                     pwd:'',                     gender:'',                 }             },             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,'name')}/>
                     <input type="text" onChange={this.handleChange.bind(this,'pwd')}/>
                     <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:''                 }             },             render:function(){                 return <p>
                     <input type="text" onChange={this.handleChange('text')} />
                     <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中所有的非成对标签，必须将标签闭合，比如： <input/> 否则会报错: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:'example',
　　}
}

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

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

react react.js PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

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

上一条：react的函数有哪些？react函数的详细解析（附实例）下一条：React 16 新特性有哪些？react16的新特性和功能的介绍

查看更多

热门课程

PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）

￥189
￥399

已抢15703个
抢
自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

￥59
￥199

已抢48715个
抢
swoole从入门到精通(第一季)

￥119
￥129

已抢3821个
抢
swoole项目实战(第二季)

￥119
￥129

已抢1551个
抢
swoole入门物联网开发与实战

￥119
￥129

已抢1778个
抢
前端开发（基础+实战项目合集）

￥800
￥1200

已抢2783个
抢

打开APP，随时随地在线学习！

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

相关文章

￥189

￥59

￥119

￥119

￥119

￥800