react学习笔记

背景

1. facebook

特点

1. 声明式
2. 组件化

高效

1. 虚拟DOM，不总是直接操作dom
2. diff算法，最小化重绘页面

issues

2. 告诉babel去解析jsx语法

react库

1. react.js 核心库
2. babel.min.js 把jsx语法转为js语法
3. react-dom.js 提供操作dom的react扩展库

步骤

1. 创建虚拟dom，React.createElement(‘h1’, {id: “test”}, content)
2. 渲染虚拟dom，ReactDOM.render(virtualDOM, containerDOM)

语法

1. {}
2. {{}} // 里面的代表是js对象，外边的代表里面要写js语法

模块与组件化

1. 模块
   1. 复用js
   2. 一个js文件就是一个模块
2. 组件
   1. 一个界面的不同部分

组件标签

1. 首字母大小，大驼峰

定义组件

1. 工厂函数，没有状态
   1. Person.propTypes
      1. React.PropTypes.string.isRequired
   2. Person.defaultProps
   3. this.props.propertyName
2. class Test extends React.Component { render() { return } }

组件三大属性

1. props
2. state
   1. 初始化，constructor
   2. 读取，this.state
   3. 修改，this.setState
3. refs

this

handleClick() {
  // this
  // 默认不是当前组件对象。指的是undefined
}
render() {
  // this指的是当前组件对象
  // bind 将handleClick方法中的this强制指向当前组件对象
  <h1 onClick="this.handleClick.bind(this)"></h1>
}

PropTypes

refs

1. <input type=‘text’ ref={inp => this.input} />
2. inp 为当前dom元素
3. this为当前组件对象
4. 不要过度使用

组件化编写

1. 拆分组件
2. 实现UI组件
3. 实现动态组件
   1. 初始化数据
   2. 绑定事件
4. 后缀名可以写.jsx与.js，推荐前者

受控组件

非受控组件

生命周期

1. constructor
2. componentWillMount
3. render
4. componentDidMount
5. componentWillUpdate
   1. render
   2. componentDidUpdate
6. componentWillUnmount

移除组件

1. ReactDOM.unmountComponentAtNode(document.getElementById(‘box’))

脚手架-create-react-app

1. 就是去下载了一个已经存在的项目
2. 包含了所有需要的配置
3. 指定好了所有的依赖
4. npm i create-react-app -g
5. create-react-app project-name

package

1. 开发时依赖，编译，打包需要，devDependencies
2. 运行时依赖，dependencies
3. 描述当前项目的信息

npm root -g // 查看全局安装的路径

请求-axios

1. 在componentDidMount进行

请求-fetch

1. 原生函数
2. 老版本浏览器不支持
3. 引入fetch.js兼容低版本浏览器
4. 不再使用XmlHttpRequest对象
5. 在IE8+以上的浏览器使用fetch是可行的

组件间通信-props

1. props只能一层一层传递
2. props可以传递一般数据和函数数据

组件间通信-subscribe-publish

1. npm i pubsub-js
2. 类似于vue的this.$emit和this.$on
3. pubSub.publish(‘search’, data)
4. pubSub.subscribe(‘search’, (msg, data) => {})
5. 适用于兄弟组件之间

路由-react-router

<BrowserRouter>
  <App />
</BrowserRouter>

<HashRouter>
  <App />
</HashRouter>

// 替代了之前的a标签
<NavLink className="" to="/home"></NavLink>
// 优化封装NavLink
export default class MyNavLink extends Component {
  render() {
    // 将外部传入的所有属性传递给 NavLink
    return <NavLink {...this.props} activeClassName=""/>
  }
}

// 用 Switch包裹，代表这里面的路由匹配到才会显示
<Switch>
  <Route path="/home" component={HomeComponent} />
  <Redirect to="/home" /> // 地址栏为 / 加载home组件
</Switch>

8. history对象
9. match对象

this.props.match.params

10. withRouter函数
11. npm i react-router-dom
12. 通过js: this.props.history.push()、this.props.history.replace()、this.props.history.goBack() // 前进、this.props.history.goForward() // 后退

函数组件

1. 单纯用来展示数据
2. export default function ShowMessage(props) {return() {}}

UI

1. material-ui（国外）
2. antd-design（国内）
3. https://mobile.ant.design/index-cn