React笔记

发表于 | 分类于 |

React三大体系

在这里插入图片描述

React搭建

  • 安装node
  • Node中文网址：http://nodejs.cn/ (建议你在这里下载，速度会快很多)
  • 安装create-react-app
    1
    npm install -g create-react-app
  • create-react-app新建demo1 
    1
    create-react-app demo1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Inside that directory, you can run several commands:
  npm start
    Starts the development server.
  npm run build
    Bundles the app into static files for production.
  npm test
    Starts the test runner.
  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
  cd demo1
  npm start
Happy hacking!

目录基本介绍

  • index.js 入口文件

    1
    import * as serviceWorker from './serviceWorker'; // 用于PWA

  • public > manifest.js 用于PWA

HellowWorld和组件

  • 进入src新建index.js入口文件

    1
    2
    3
    4
    5
    import React from 'react';  
    import ReactDom from 'react-dom';
    import App from './app';

    ReactDom.render(<App />,document.getElementById('root'));

  • 编写App组件 进入src新建 app.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import React,{Component} from 'react'; // {Component} 解构赋值 等同于  const Component = React.Component

    class App extends Component{
        render(){
            return(
                <div>Hello 子小</div>
            )
        }
    }
    export default App;

JSX语法简单介绍

JSX就是 Javascript 和 XML 的组合 是react定义的，可以方便的利用HTML语法来创建虚拟DOM，，可以方便的利用HTML语法来创建虚拟DOM，
通俗理解为 遇到 < 解析 为html，遇到{解析为js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React,{Component} from 'react'; // {Component} 解构赋值 等同于  const Component = React.Component

class App extends Component{
    render(){
        return(
            <ul className="list">
                <li className="item">我是子小</li>
                <li className="item">我喜欢前端</li>
                <li className="item">不喜欢产品</li>
            </ul>
        )
    }
}
export default App;

==jsx的class必须写成className==

reacts使用js创建html标签

1
2
3
4
5
6
7
8
9
10
11
import React,{Component} from 'react'; // {Component} 解构赋值 等同于  const Component = React.Component

class App extends Component{
    render(){
        var item1 = React.createElement('li', null, '我是子小');
        var item2 = React.createElement('li', null, '我喜欢前端');
        var list = React.createElement('ul', { className: 'list' }, [item1, item2]);
        return[list]
    }
}
export default App;

子小爱好菜单

新建一个 Like.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component,Fragment } from 'react';

class Like extends Component{
    render() {
        return(
            <Fragment>
            <div className="likewrap">
                <h4>子小的爱好</h4>
                <div className="lw-contentwrap">
                    <input type="text" className="lwc-input"/>
                    <button className="lwc-button">增加</button>
                </div>
                <ul className="lw-list">
                    <li className="lw-item">吃饭</li>
                    <li className="lw-item">喝饮料</li>
                    <li className="lw-item">玩游戏</li>
                    <li className="lw-item">宅家</li>
                </ul>
            </div>
            </Fragment>
        )
    }
}
export default Like;

==Fragment标签用来包裹元素，类似于vue的template标签==

加上最外层的DIV，组件就是完全正常的，但是你的布局就偏不需要这个最外层的标签怎么办?比如我们在作Flex布局的时候,外层还真的不能有包裹元素。这种矛盾其实React16已经有所考虑了，为我们准备了标签。

input的赋值绑定

  • 响应式设计和数据绑定
    React不建议你直接操作DOM元素,而是要通过数据进行驱动，改变界面中的效果。React会根据数据的变化，自动的帮助你完成界面的改变。所以在写React代码时，你无需关注DOM相关的操作，只需要关注数据的操作就可以了（这也是React如此受欢迎的主要原因，大大加快了我们的开发速度）。
    现在的需求是增加小姐姐的服务项，就需要先定义数据。数据定义在Like组件中的构造函数里constructor。
    1
    2
    3
    4
    5
    6
    7
    8
    // js的构造函数，由于其他任何函数执行
        constructor(props){
            super(props)
            this.state = {
               inputValue: '123', // input的值
               list:[]
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* eslint-disable react/no-direct-mutation-state */
import React, { Component,Fragment } from 'react';

class Like extends Component{
    // js的构造函数，由于其他任何函数执行
    constructor(props){
        super(props)
        this.state = {
           inputValue: '123', // input的值
           list:[
             '喝饮料','吃饭','宅家'
           ]
        }
    }
    inputChange(e) {
        console.log(e);
        this.setState({
            inputValue: e.target.value
        })
    }
    addItem(e){
       this.setState({
           list: [...this.state.list,this.state.inputValue],
           inputValue:'',
       })
    }
    deleteItem(index){
        let newList = this.state.list;
        newList.splice(index,1);
        this.setState({
            list: newList
        })
    }

    render() {
        return(
            <Fragment>
            <div className="likewrap">
                <h4>子小的爱好</h4>
                <div className="lw-contentwrap">
                        <input type="text" className="lwc-input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button className="lwc-button" onClick={this.addItem.bind(this)}>增加</button>
                </div>
                <ul className="lw-list">
                    {
                        this.state.list.map((item, index)=>{
                            return <li className="lw-item" key={index + item} onClick={this.deleteItem.bind(this, index)}>{item}</li>
                        })
                    }
                </ul>
            </div>
            </Fragment>
        )
    }
}
export default Like;

JSX防踩坑的地方

关于注释
  • {/*第一次注释*/}
    1
    2
    3
    4
    <Fragment>
         {/* 第一次注释 */}
         <div className="likewrap"></div>
    </Fragment>
关于class 必须使用 className
1
<button className="lwc-button">增加</button>

####### 关于html标签解析的问题

1
<li className="lw-item" key={index + item} onClick={this.deleteItem.bind(this, index)} dahngerouslySetInnerHTML={{__html:item}}></li>

关于laber 的for必须使用htmlFor

因为会和js中的for冲突 所以更换了名称

1
2
<label htmlFor="likeinput"></label>
<input id="likeinput" type="text" className="lwc-input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

Simple React Snippets插件的使用

Vscode插件搜索Simple React Snippets，点击安装，即可使用，常用快捷键如下：

Snippet Renders
imr Import React
imrc Import React / Component
impt Import PropTypes
impc Import React / PureComponent
cc Class Component
ccc Class Component With Constructor
sfc Stateless Function Component
cdm componentDidMount
cwm componentWillMount
cwrp componentWillReceiveProps
gds getDerivedStateFromProps
scu shouldComponentUpdate
cwu componentWillUpdate
cdu componentDidUpdate
cwu componentWillUpdate
cdc componentDidCatch
gsbu getSnapshotBeforeUpdate
ss setState
ssf Functional setState
ren render
rprop Render Prop
hoc Higher Order Component 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
// Simple React Snippets 插件

// imr
import React from 'react';

// imrc
import React, { Component } from 'react';

// impt
import PropTypes from 'prop-types';

// impc
import React, { PureComponent } from 'react';

// cc
class  extends Component {
    state = {  }
    render() { 
        return (  );
    }
}
 
export default ;

// ccc
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  );
    }
}
 
export default ;

// sfc
const  = () => {
    return (  );
}
 
export default ;

// cdm
componentDidMount = () => {
  
};

// cwm
componentWillMount = () => {
  
};

// cwrp
componentWillReceiveProps(nextProps) {
    
}

// gds
static getDerivedStateFromProps(nextProps, prevState) {
    
}

// scu
shouldComponentUpdate(nextProps, nextState) {
    
}

// cwu
componentWillUpdate() {
    
}

// cdu
componentDidUpdate(prevProps, prevState) {
    
}

// cwun 
componentWillUnmount = () => {
  
};

// cdc
componentDidCatch(error, info) {
    
}

// gsbu
getSnapshotBeforeUpdate(prevProps, prevState) {
    
}

// ss
this.setState({ :  });

// ssf
this.setState((state, props) => { return {  }})

// ren
render() {
  return (
    <div>
      
    </div>
  )
};

// rprop
class  extends Component {
    state = { :  }
    render() { 
        return this.props.render({
            : this.state.
        });
    }
}
 
export default ;

// hoc
import React from 'react';
import PropTypes from 'prop-types';

export default (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {
  };

  return hocComponent
};

component组件拆分

新建likeItem.js组件

1
2
3
4
5
6
7
8
9
import React, { Component } from 'react';

export default class componentName extends Component {
  render() {
    return (
      <div> LikeItem 我是LikeItem组件 </div>
    );
  }
}

在likeItem.js组件引入

1
2
import LikeItem from './LikeItem'
<LikeItem></LikeItem>

父子传值

父组件

1
2
3
4
5
{
     this.state.list.map((item, index) => {
            return <LikeItem content={item} key={index} index={index} deleteItem{this.deleteItem.bind(this)}></LikeItem>
      })
}

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from 'react';

export default class componentName extends Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(){
    console.log('点击了子组件的列表')
    // this.props.index
    console.log(this.props.index)
    this.props.deleteItem(this.props.index)
  }
  render() {
    return (
      <div onClick={this.handleClick}> {this.props.content} 我是LikeItem组件 </div>
    );
  }
}

0%