React学习知识
来源:互联网 发布:phpstorm 压缩js 编辑:程序博客网 时间:2024/06/05 02:59
正式开始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 <div> <HelloWorld {...this.state}/> <input type="text" onChange={this.handleChange} /> </div> } }); 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> <div id= "root"></div> <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>
兄弟组件之间可以用过子组件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> <div id= "root"></div> <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>
优点和缺点:
<!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> <div id= "root"></div> <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 <div> <input type="text" onChange={this.handleChange('text')} /> <p>{this.state.text}</p> </div> } }); var a = ReactDOM.render(<Example />,document.getElementById("root")); </script> </body> </html>
16、可控组件和不可控组件
可控组件就是value值没有写死的,比如value={this.state.value}。
不可控则反之。
尽量使用可控组件
碰到的问题:
1、在wepack.config.js配置项中,因为module中的loader是多个配置项,所以应该是loaders,但是我写的是loader,导致后面的配置项没有生效,出现了很多编译问题。。。
2、在组件的render中return的标签,结尾的标签忘记打/,比如<div></div>写成了<div><div> react就识别成了两个div标签,就会报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.js学习知识小结(一)
- React Native 学习资源精选仓库(汇聚知识,分享精华)
- React Native 学习资源精选仓库(汇聚知识,分享精华)
- react 入门知识
- react 知识整理01
- react知识小结
- React-Redux 知识梳理
- react 学习
- react学习
- react学习
- react学习
- react 学习
- React学习
- React学习
- react学习
- React学习
- react学习
- 学生信息系统优化总结
- Python学习(二)——控制流
- CSS垂直方向上文本居中
- Python如何运行程序
- RF,RobotFramwork使用Cookie获取验证码,登录账户
- React学习知识
- C++学习笔记-----string类的使用
- 好的用户体验来自好的设计策略
- App Shortcuts (android25,7.1)
- oracle oracleDBConsole错误代码2
- Isight FD v5.0 Win32_64 1DVD\
- 4、PHP $_GET和$_POST变量
- rgw 各个pool作用
- 表头固定