react学习笔记

      最近几个月自己一直是用vue做项目，深感自身知识面有些匮乏，遂开始学习react。一下记录下自己在学习中的一些知识点及注意事项。

1.create-react-app脚手架

1.在package.json文件中设置proxy代理

"proxy": {
    "/api": {
      "target": "http://localhost:8080"
    }
  }

2.添加less支持

1.安装less,less-loader

yarn add --dev less less-loader

2.展开自定义配置

yarn eject

3.修改配置文件

//webpack.config.dev.js
 {
            test: /\.(css|less)$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('less-loader') // compiles Less to CSS
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
 },
 //webpack.config.prod.js
 {
            test: /\.(css|less)$/,
            loader: ExtractTextPlugin.extract(
              Object.assign(
                {
                  fallback: {
                    loader: require.resolve('style-loader'),
                    options: {
                      hmr: false,
                    },
                  },
                  use: [
                    {
                      loader: require.resolve('css-loader'),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: shouldUseSourceMap,
                      },
                    },
                    {
                      loader: require.resolve('less-loader') // compiles Less to CSS
                    },
                    {
                      loader: require.resolve('postcss-loader'),
                      options: {
                        // Necessary for external CSS imports to work
                        // https://github.com/facebookincubator/create-react-app/issues/2677
                        ident: 'postcss',
                        plugins: () => [
                          require('postcss-flexbugs-fixes'),
                          autoprefixer({
                            browsers: [
                              '>1%',
                              'last 4 versions',
                              'Firefox ESR',
                              'not ie < 9', // React doesn't support IE8 anyway
                            ],
                            flexbox: 'no-2009',
                          }),
                        ],
                      },
                    },
                  ],
                },
                extractTextPluginOptions
              )
            ),
            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
 },

3.生产环境去除sourcemap

//webpack.config.prod.js

// devtool: shouldUseSourceMap ? 'source-map' : false,
  devtool: false,

2.react基础

1.react中在return中注释

{/*这是注释*/}

2.react中让return中正确显示空格

1.转unicode编码

let html = '哈哈\u0020哈哈';

<p>{html}</p>

2.在标签中使用dangerouslySetInnerHTML,可能存在XSS攻击 

let html1 = '哈哈&nbsp;哈哈';

<p dangerouslySetInnerHTML={{__html: html1}}></p>

3.react生命周期

constructor(props, context)

构造函数，在创建组件的时候调用一次。

void componentWillMount()

在组件挂载之前调用一次。如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。

void componentDidMount()

在组件挂载之后调用一次。这个时候，子主键也都挂载好了，可以在这里使用refs。

void componentWillReceiveProps(nextProps)

props是父组件传递给子组件的。父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。

bool shouldComponentUpdate(nextProps, nextState)

组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。

void componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。

void componentDidUpdate()

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

componentWillMount、componentDidMount和componentWillUpdate、

componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。

ReactElement render()

render是一个React组件所必不可少的核心函数（上面的其它函数都不是必须的）。记住，不要在render里面修改state。

void componentWillUnmount()

组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。

4.属性与实践

1.state属性

state对于模块属于自身属性

初始化：this.state={username:'wkl'};

初始化可以放在构造函数constructor里

修改state:this.setState({username:'111''})

state的作用域只属于当前的类，不污染其他模块

2.props属性

props对于模块属于外来属性

传递参数 <ComponentBody userid={123456} username={'哈哈哈哈'}/>

模块中接受参数：this.props.username

传递所有参数的快捷方式

<Component {...this.props}></Component>

5.获取原生dom节点
第一种方式

let mySubmitButton = document.getElementById('submitButton');

ReactDOM.findDOMNode(mySubmitButton).style.color = 'red';

第二种方式refs

<div className="load-more" ref="wrapper">
</div>

const wrapper = this.refs.wrapper;

6.react-router 4.0中withRouter的使用

组件绑定了withRouter可以通过this.props获取到

location
match
history

1.通过this.props.history来控制跳转

this.props.history.go()    1   -1
this.props.history.goBack()     -1
this.props.history.goForward()    1
this.props.history.replace()
this.props.history.push()

2.通过match可以获取路由参数

this.props.match.params

3.withRouter与connect配合使用

export default withRouter(connect(
   mapStateToProps,
   mapDispatchToProps
)(List))

7.react轮播图插件react-swipe

https://github.com/voronianski/react-swipe

未完待续…