react笔记
webpack常用loader （经常更新，请参考最新版配置）
**react ** react-dom babelify babel-preset-react babel-preset-es2015 webpack webpack-dev-server webpack-cli jsx-loader babel-loader babel-core style-loader css-loader babel-plugin-react-html-attrs
react组件(初始化项目之后，写出下面两个 文件，react一个简单的显示就出来了)
index.js
var React = require('react')
var ReactDom = require('react-dom')
ReactDom.render(我是好
, document.getElementById('app'))
index.html
组件嵌套
新增一个js文件header.js
import React from "react"
export default class Header extends React.Component{
render(){
return (
我是tou部
)
}
}
index.js引入组件header（方法一）
var React = require('react')
var ReactDom = require('react-dom')
import HeaderComponent from './components/header'
class Index extends React.Component{
render(){
return (
{/* 这个是注释，这是第一种引入组件的方法 */}
index.js引入组件header（方法二）
var React = require('react')
var ReactDom = require('react-dom')
import HeaderComponent from './components/header'
class Index extends React.Component{
render(){
//这里的注释要这样写的哦
var header = jsx内置表达式
- render方法中的html代码中的大括号可以使用三目运算符
{user==''?"没登陆":user} - 绑定动态属性的时候不加引号
- 变量中的空格传入问题
方法一
var space = '这里有 一个空格这个方法是不推荐的'
方法二（使用unicode编码传入空格）
var unicodeM = '\u007a\u006f\u0065\u0020\u0031\u0032\u0033'
=============================
生命周期
// 创建阶段
getDefaultProps // 处理props默认值，在React.createClass 调用
// 实例化阶段
React.render() 之后
getInitialState / componentWillMount / render / componentDidMount /
// 更新时
componentWillReceiveProps / shouldComponentUpdate / componentWillUpdate / render / componentDidUpdate
这是2个生命周期的图片，两个对照来看
这些英文的方法都是在react中直接可以使用的
这个方法写在组件的内部，和render方法同级
import React from "react"
export default class Header extends React.Component{
componentWillMount(){
console.log("header组件即将加载")
}
componentDidMount(){
console.log("组件加载完成")
}
render(){
return (
我是tou部
)
}
}
其他生命周期函数就不一一举例，生命周期函数的加载顺序和组件的加载顺序相同
例如：父组件（index）和子组件（header）都挂载了生命周期函数，他们的执行顺序如下
index（willMount）=》 header（willMount）=》 header（DidMount）=》index（DidMount）
========
react中的state，这个是react中的主要角色
现在我们展示下怎么设置state
import React from "react"
import ReactDom from 'react-dom'
export default class Header extends React.Component{
constructor(){
super();
this.state={//设置值
num:123
}
}
componentWillMount(){
console.log("header组件即将加载")
}
componentDidMount(){
console.log("组件加载完成")
setTimeout(function(){
this.setState({num:333})
}.bind(this),4000)
}
render(){
return (
我是tou部{this.state.num}
)
}
}
======================
子组件获取父组件数据
父组件
import React from "react"
import ReactDom from 'react-dom'
import HeaderChild from './headerChild'
export default class Header extends React.Component{
constructor(){
super();
this.state={
num:123
}
}
render(){
return (
)
}
}
子组件
import React from 'react'
import HeaderGrandson from './headerGrandson'
export default class HeaderChild extends React.Component{
render(){
return (
父组件数据：{this.props.number1}
)
}
}
孙辈组件
import React from 'react'
export default class HeaderGrandson extends React.Component{
render(){
return (
父组件数据11111：{this.props.number1}
)
}
}
多人合作的时候一般都是每个人负责特定的模块，那么怎么确保数据的类型是我们想要的呢，看下面的实例
import React from 'react'
import PropTypes from 'prop-types'//这个事必须的
import HeaderGrandson from './headerGrandson'
export default class HeaderChild extends React.Component{
render(){
return (
父组件数据：{this.props.number1}
)
}
}
HeaderChild.propTypes = {//这里限制数据类型
number1:PropTypes.number
}
如果有些数据是必须的，我们可以这样做
import React from 'react'
import PropTypes from 'prop-types'
import HeaderGrandson from './headerGrandson'
export default class HeaderChild extends React.Component{
constructor(props){
super(props);
this.state={
childMsg:'我是headerChild的数据哦'
}
}
render(){
return (
父组件数据：{this.props.number1}
我是默认属性--------child-----{this.props.name}
{/*默认数据的调用方法*/}
)
}
}
HeaderChild.propTypes = {//isRequired表明这个数据时必须的
number1:PropTypes.number.isRequired
}
HeaderChild.defaultProps ={//设置默认数据
name:'qiphon',
number1:22
}
更多的数据类型限制看这里https://reactjs.org/docs/typechecking-with-proptypes.html
==============
父级获取子级数据的方法 （只能通过函数方法）
child.js
import React from 'react'
import PropTypes from 'prop-types'
import HeaderGrandson from './headerGrandson'
export default class HeaderChild extends React.Component{
constructor(props){
super(props);
this.state={
childMsg:'我是headerChild的数据哦'
}
}
render(){
return (
父组件数据：{this.props.number1}
{/* 只有这里有东西哦 */}
)
}
}
HeaderChild.propTypes = {
number1:PropTypes.number
}
header.js
import React from "react"
import ReactDom from 'react-dom'
import HeaderChild from './headerChild'
export default class Header extends React.Component{
constructor(){
super();
this.state={
num:123
}
}
headerFun(event){//定义数据的方法
this.setState({
msg:event.target.value
})
}
render(){
return (
我是tou部{this.state.num}
子集传过来的数据---child--{this.state.msg}
{/*显示传过来的数据*/}
)
}
}
==============
refs的使用
react中使用原生方法操作dom时可以这样做（不推荐）
方法二就是用react中的ref关联要操作的元素
import React from "react"
import ReactDom from 'react-dom'
export default class Footer extends React.Component{
change(){//这是第一种方法
var btn = document.getElementById('btn')
console.log(btn)
ReactDom.findDOMNode(btn).style.color='red'
}
changeC(){//我是第二个方法
console.log(this)
console.log(this.refs) // 官方已经不让这样使用了，请参考官方文档ref
this.refs.btn.style.color="#f00"
}
render(){
return (
)
}
}
*refs使用须知：
refs是访问到内部组件dom节点的唯一可靠的方法
refs会自动销毁子组件的引用
不要在rendering和beforeRender 时使用refs
不要滥用refs
所有的事件列表https://reactjs.org/docs/events.html
在 react 中输出 event 对象，在控制台查看是 null ，这对调试非常不友好。如图：
解决的办法很简单，在 console.log(event) 前使用event.persist() 方法即可。