最近几个月自己一直是用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 = '哈哈 哈哈';
<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
未完待续…