1、ref的使用方法
1.1 回调函数
绑定到组件：
<input
id="jspang"
className="input"
value={this.state.inputValue}
onChange={this.inputChange.bind(this)}
//关键代码——----------start
ref={(input)=>{this.input=input}}
//关键代码------------end
/>
使用时：
inputChange(){
this.setState({
inputValue:this.input.value
})
}
另一个demo
<body>
<div id="example"></div>
<script type="text/babel">
class MyComponent extends React.Component {
handleClick() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
}
render() {
// 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</script>
</body>
2. 生命周期函数
生命周期函数指在某一个时刻组件会自动调用执行的函数
2.1 初始化阶段
Initialization阶段，定义属性（props）和状态（state）。
2.2 挂载阶段
Mounting阶段，伴随整个虚拟DOM的生成，分三个小的生命周期函数。componentWillMount、componentDidMount``render，前两个只有在页面刷新时候执行，而render只要符合条件就执行。
2.2.1 componentWillMount()
在组件即将被挂载到页面的时刻执行。
2.2.2 render()
在页面state或props发生变化时执行。
2.2.3 componentDidMount()
组件挂载完成时被执行。
2.3更新阶段
2.3.1 componentWillReceiveProps (nextProps)
通过接受一个nextProps，对比nextProps和this.props，将nextProps的state设为当前组件的state，重新渲染组件
componentWillReceiveProps (nextProps) {
nextProps.openNotice !== this.props.openNotice&&this.setState({
openNotice:nextProps.openNotice
}，() => {
console.log(this.state.openNotice:nextProps)
//将state更新为nextProps,在setState的第二个参数（回调）可以打 印出新的state
})
}
2.3.2 shouldComponentUpdate(nextProps,nextState)
在setState之后，state发生变化，组件会进入重新渲染的过程，这时候return flase可以阻止组件更新。
主要面向：react父组件重新渲染后会导致子组件全部重新渲染，如果有需要可以在子组件的该生命周期中做出选择。
2.3.3 componentWillUpdate (nextProps,nextState)
当第二步
shouldComponentUpdate(nextProps,nextState)返回true以后，组件进入重新渲染流程。
2.3.4 componentDidUpdate(prevProps,prevState)
组件更新完毕，react只会在第一次初始化成功进入
componentDidUpdate，之后每次重新渲染后都会进入这个生命周期，这里可以拿到更新前的参数状态，preProps，preState
2.4 销毁阶段
componentWillUnmount()
组件在页面中被删除时候执行，比如在xiaojiejie.js，当我们点击服务项去删除，这时候函数就被执行了
3、axios数据请求
axios不依赖于react，在原生js也可以使用，是目前的主流ajax插件
在componentMount函数里请求ajax。
例如对掘金的一个接口为例，发出一次Ajax请求
componentDidMount(){
axios.post('https://web-api.juejin.im/v3/web/wbbr/bgeda')
.then((res)=>{console.log('axios 获取数据成功:'+JSON.stringify(res)) })
.catch((error)=>{console.log('axios 获取数据失败'+error)})
}
4、ECMAScript 6.0
4.1 模块
4.1.1 导入模块
import '模块文件地址'
import 组件 from '模块文件地址'
4.1.2 导出模块
export default class MyComponent extends Component{
...
}
4.1.3 引用
import MyComponent from './MyComponent';
4.2 组件
4.2.1 定义组件
通过定义一个继承自React.Component的class来定义一个组件类
class Photo extends React.Component {
render() {
...
}
}
4.2.2 state与props
props和state的差别：props用于父子组件传参，不可更改，state用于定义参数，可通过setState更新，每次更新后都会重新渲染组件。
4.3 箭头函数
一种匿名函数
参数=>{
...
return x}
5、webpack
Webpack 是一个前端打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
一个项目生成的脚手架，开发、构建相关文件可能就有十几个，代码几百行。
webpack从一个js文件为入口，通过import 、require等依赖声明，遍历整个文件数，将各种类型的文件通过loader转换为webpack可以识别的文件【如果有webpack不能识别的，可以去npm一些插件】
最后生成bundle.js文件。
1112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
