本篇文章主要的介绍了关于react的学习，关于react的知识点总结，下面我们就开始阅读这篇文章的内容吧
正式开始react的学习
1、react中组件的首字母如果是大写就会当成自定义组件，如果是小写就会当成dom的自带元素名。如果你自定义组件名称首字母是小写不会报错，但是无法显示。
2、自定义组件的return中最外层只能有一个节点。
3、编写的html中的{}中，不能有语句，可以有求值表达式。但是可以将语句写在函数中，然后在{}中调用函数。
4、函数名和标签名都使用驼峰命名。
5、使用htmlfor和classname。比如 c093f993a8a8bdecaa7e571f670af5bdname8c1ecd4bb896b2264e0711597d40766c
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、f8bc9cf04720602ff7f56b5a479e7fc5//给属性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>
父子组件交互（想看更多就到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的标签，结尾的标签忘记打/，比如<p></p>写成了<p><p> react就识别成了两个p标签，就会报embedded: unterminated jsx contents.
3、render中所有的非成对标签，必须将标签闭合，比如：<br/> <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',}}
本篇文章到这就结束了（想看更多就到react使用手册栏目中学习），有问题的可以在下方留言提问。
以上就是react该学哪些知识？react的知识点总结（附完整实例）的详细内容。