zoukankan      html  css  js  c++  java
  • reactjs学习之路

    正式开始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、状态的用法:

     1 var HelloWorld = React.createClass({
     2             render:function(){
     3                 return <p>Hello,{this.props.name||"world"}</p>
     4             }
     5         });
     6         var HelloUniverse = React.createClass({
     7             handleChange:function(e){
     8                 this.setState({
     9                     name:e.target.value
    10                 });
    11             },
    12             getInitialState:function(){
    13                 return {
    14                     name:'',
    15                 }
    16             },
    17             render:function(){
    18                 return <div>
    19                     <HelloWorld {...this.state}/>
    20                     <input type="text" onChange={this.handleChange} />
    21                 </div>
    22             }
    23         });
    24         var a = ReactDOM.render(<HelloUniverse/>
    25         ,document.getElementById("root"));
    View Code

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

    12、事件处理函数

     

    13、事件对象的属性

     

     

     14、组件协同使用

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

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Hello,world</title>
     6     <script src="../demo01/build/react.js"></script>
     7     <script src="../demo01/build/react-dom.js"></script>
     8     <script src="../demo01/browser.min.js"></script>
     9 </head>
    10 <body>
    11     <div id= "root"></div>
    12     <script type="text/babel">
    13         var GenderSelect = React.createClass({
    14             render:function(){
    15                 return <select name="gender" onChange={this.props.handleSelect}>
    16                     <option value="1">男</option>
    17                     <option value="0">女</option>
    18                 </select>
    19             }
    20         });
    21         var SignupForm = React.createClass({
    22             getInitialState:function(){
    23                 return {
    24                     name:'',
    25                     pwd:'',
    26                     gender:'',
    27                 }
    28             },
    29             handleChange:function(name,e){
    30                 var newState = {}
    31                 newState[name] = e.target.value;
    32                 this.setState(newState);
    33             },
    34             handleSelect:function(e){
    35                 this.setState({gender:e.target.value});
    36             },
    37             render:function(){
    38                 console.log(this.state)
    39                 return <form>
    40                     <input type="text" onChange={this.handleChange.bind(this,'name')}/>
    41                     <input type="text" onChange={this.handleChange.bind(this,'pwd')}/>
    42                     <GenderSelect handleSelect={this.handleSelect}/>
    43                 </form>
    44             }
    45         });
    46         var a = ReactDOM.render(<SignupForm />,document.getElementById("root"));
    47     </script>
    48 </body>
    49 </html>
    父子组件交互

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

    15、mixin

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Hello,world</title>
     6     <script src="../demo01/build/react.js"></script>
     7     <script src="../demo01/build/react-dom.js"></script>
     8     <script src="../demo01/browser.min.js"></script>
     9 </head>
    10 <body>
    11     <div id= "root"></div>
    12     <script type="text/babel">
    13         var SetInit = {
    14             handleClick:function(e){
    15                 console.log(e.target.value);
    16             }
    17         }
    18         var Hello = React.createClass({
    19             //这里命名必须为mixins
    20             mixins:[SetInit],
    21             render:function(){
    22                 return <input type="button" onClick={this.handleClick} value="123123"/>
    23             }
    24         });
    25         var a = ReactDOM.render(<Hello />,document.getElementById("root"));
    26     </script>
    27 </body>
    28 </html>
    mixin实例

     优点和缺点:

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Hello,world</title>
     6     <script src="../demo01/build/react.js"></script>
     7     <script src="../demo01/build/react-dom.js"></script>
     8     <script src="../demo01/browser.min.js"></script>
     9 </head>
    10 <body>
    11     <div id= "root"></div>
    12     <script type="text/babel">
    13         var BindingMixin = {
    14             handleChange:function(name){
    15                 var that = this;
    16                 return function(e){
    17                     var news = {};
    18                     news[name] = e.target.value;
    19                     that.setState(news);
    20                 }
    21             }
    22         };
    23         var Example = React.createClass({
    24             //这里命名必须为mixins
    25             mixins:[BindingMixin],
    26             getInitialState:function(){
    27                 return {
    28                     text:''
    29                 }
    30             },
    31             render:function(){
    32                 return <div>
    33                     <input type="text" onChange={this.handleChange('text')} />
    34                     <p>{this.state.text}</p>
    35                 </div>
    36             }
    37         });
    38         var a = ReactDOM.render(<Example />,document.getElementById("root"));
    39     </script>
    40 </body>
    41 </html>
    mixin

    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',
      }
    }

  • 相关阅读:
    1104 Sum of Number Segments (20 分)(数学问题)
    1092 To Buy or Not to Buy (20 分)(hash散列)
    1082 Read Number in Chinese (25 分)(字符串处理)【背】
    1105 Spiral Matrix (25 分)(模拟)
    初识网络安全及搭建网站(内网)
    HTML5开发者需要了解的技巧和工具汇总(转)
    native+web开发模式之web前端经验分享
    移动平台3G手机网站前端开发布局技巧汇总(转)
    Asp.net 中图片存储数据库以及页面读取显示通用方法详解附源码下载
    使用H3Viewer来查看VS2010的帮助文档
  • 原文地址:https://www.cnblogs.com/baqiphp/p/5999053.html
Copyright © 2011-2022 走看看