用于构建用户界面的 JavaScript 库

JSX语法

style

let style = {
color: 'r'+'ed',
fontSize: '30px'
}
let jsx = <div style={style}>jsx...</div>;

className

import './index.scss';
let jsx = (
<div className="jsx">
jsx...
</div>
);

变量的使用和条件判断

let name = "Jomsou";
let flag = false;
let jsx = (
<div>
{ flag ? <p> I am {name} </p> : <p> I am not {name}</p>}
</div>
);

数组循环

let names = ['jomsou', 'marry', 'james']
let jsx = (
<div>
{ names.map((name, index)=><p key={index}>Hello, I am {name}</p>)}
</div>
);

React组件的定义

ES5
function Component() {
return <h1>I am Jomsou</h1>
}
ES6
class ES6component extends React.Component{
render(){
return <h1>I am Jomsou</h1>
}
}
ReactDOM.render(
<div>
<Component/>
<ES6component/>
</div>,
document.getElementById('app')
);

state:状态,即所有参数

setState:设置状态变化

super:继承父组件的this指针

class ES6component extends React.Component{
constructor(props){
super(props);
this.state = {
name: 'Jomsou'
}
}
render(){
//用于异步操作
setTimeout(() => {
this.setState({
name: 'Jomsou Can'
})
}, 2000);
return <h1>I am {this.state.name}</h1>
}
}
ReactDOM.render(
<div>
{/* <Component/> */}
<ES6component/>
</div>,
document.getElementById('app')
);

props: 父组件往子组件里传递东西

class ES6component extends React.Component{
constructor(props){
super(props);
}
render(){
return <h1>I am {this.props.name}</h1>
}
}
ReactDOM.render(
<div>
<ES6component name="Jomsou STC"/>
</div>,
document.getElementById('app')
);

事件处理

方式1:

1、按钮button点击后,this会改变,所以需要在constructor中加this.handleClick = this.handleClick.bind(this);

handleClick(){
this.setState({
age: this.state.age+1
})
}
render(){
return (
<div>
<h1>I am {this.state.name}</h1>
<p>I am {this.state.age} years</p>
<button onClick={this.handleClick}>加一岁</button>
</div>
)
}

方式2:

onValChange(e){
this.setState({
age: e.target.value
})
}
render(){
return (
<div>
<h1>I am {this.state.name}</h1>
<p>I am {this.state.age} years</p>
<input type="text" onChange={(e)=>this.onValChange(e)} />
</div>
)
}

容器式组件和单纯组件

class Title extends React.Component {
render(props){
// return <h1>{this.props.title}</h1>
return <h1>{this.props.children}</h1>
}
}
class App extends React.Component {
render(){
return (
<div>
{/* 容器式组件 */}
{/* <Title title="App Title"/> */}
<Title>
<span>App Span</span>
<a href="">link</a>
</Title>
<hr/>
{/* 单纯组件 */}
<Component/>
</div>
)
}
}

父组件向子组件传值

用props传值

class Title extends React.Component {
render(props){
<h1>{this.props.title}</h1>
}
}
class Father extends React.Component {
constructor(props){
super(props);
}
render(){
return (
<div}>
<Title title="App Title"/>
</div>
)
}
}

子组件向父组件传值

通过回调函数

class Child extends React.Component {
constructor(props){
super(props);
}
handleClick(){
this.props.onChangeColor('red');
}
render(){
return (
<div>
<h1>父组件的背景颜色:{this.props.bgColor}</h1>
<button onClick={(e)=>this.handleClick(e)}>改变颜色</button>
</div>
)
}
}
class Title extends React.Component {
render(props){
return <h1>{this.props.children}</h1>
}
}
class Father extends React.Component {
constructor(props){
super(props);
this.state = {
bgColor: '#999'
}
}
onChangeColor(color){
this.setState({
bgColor: color
})
}
render(){
return (
<div style={{background: this.state.bgColor}}>
<Child bgColor={this.state.bgColor} onChangeColor={color=>this.onChangeColor(color)}/>
</div>
)
}
}
ReactDOM.render(
<div>
<Father/>
</div>,
document.getElementById('app')
);

兄弟组件相互传值

状态提升——先提升到父组件上,再到兄弟组件里

class Child1 extends React.Component {
constructor(props){
super(props);
}
handleClick(){
this.props.changeChild2Color('red');
}
render(){
return (
<div>
<h1>child1:{this.props.bgColor}</h1>
<button onClick={(e)=>this.handleClick(e)}>改变颜色</button>
</div>
)
}
}
class Child2 extends React.Component {
constructor(props){
super(props);
}
render(){
return (
<div style={{background: this.props.bgColor}}>
<h1>Child2:{this.props.bgColor}</h1>
</div>
)
}
}
class Title extends React.Component {
render(props){
return <h1>{this.props.children}</h1>
}
}
class Father extends React.Component {
constructor(props){
super(props);
this.state = {
bgColor: '#999'
}
}
onChangeChild2Color(color){
this.setState({
bgColor: color
})
}
render(){
return (
<div>
<Child1 changeChild2Color={(color)=>this.onChangeChild2Color(color)}/>
<Child2 bgColor={this.state.bgColor}/>
</div>
)
}
}
ReactDOM.render(
<div>
<Father/>
</div>,
document.getElementById('app')
);

生命周期

从生到死

作用:

  • Mounting: 挂载阶段
  • Updating:运行时阶段
  • Unmounting:卸载阶段
  • Error Handling: 错误处理

挂载阶段

constructor
componentWillMount
render
componentDidMount

有更新的情况

componentWillReceiveProps//如果父组件向子组件传值,执行
shouldComponentUpdate: 默认是true,可以更新//设置为flase则没有以下步骤
componentWillUpdate
render
componentDidUpdate

卸载阶段

componentWillUnmount

Router原理及React-Router

历史--栈的形式

跳转--可传递数据

事件

常见的Router

  • 页面Router:重新渲染
window.location.href="https://www.baidu.com"
  • Hash Router
window.loaction = '#hash';
window.onhashchange = function(){
console.log('current hash:', window.location.hash)
}
  • H5 Router

包括页面跟hash路由

//推进一个状态
history.pushState('name', 'title', '/path');
//替换一个状态
history.replaceState('name', 'title', '/path');
//popstate
window.onpopstate = function(){
console.log(window.location.href);
console.log(windos.location.pathname);
}

HashRouter和BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Link } from 'react-router-dom'; class A extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>Component A</div>
)
}
}
class B extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>Component B</div>
)
}
}
class Wraper extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Link to="/a">组件A</Link>
<br/>
<Link to="/b">组件B</Link>
{this.props.children}
</div>
)
}
} ReactDOM.render(
<Router>
<Wraper>
<Route path="/a" component={A} />
<Route path="/b" component={B} />
</Wraper>
</Router>
, document.getElementById('app'));

如果把hashRouter改成BrowserRouter,则变成

react知识总结的更多相关文章

  1. React知识杂烩(持续更新)

    每隔半年不看官方文档,你就会不认识React了

  2. vue和react全面对比(详解)

    vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...

  3. Vue于React特性对比(二)

    一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...

  4. react 入门与进阶教程

    react 入门与进阶教程 前端学习对于我们来说越来越不友好,特别是随着这几年的发展,入门门槛越来越高,连进阶道路都变成了一场马拉松.在学习过程中,我们面临很多选择,vue与react便是一个两难的选 ...

  5. React入门 (2)—实现微博展示列表

    前言 如果从来不了解React先看前篇React入门 (1)-使用指南(包括ES5和ES6对比). 本文为了能将前篇学到的react知识学以致用,做了一个类似微博展示列表的demo.使用的是ES6+R ...

  6. vue、React Nactive的区别(转载)

    Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...

  7. Weex 和 React Native 的比较看这里

    写在前面 目前主流的应用大体分成三类:Native App, Web App, Hybrid App. Native App 特点: 性能好 完美的用户体验 开发成本高,无法跨平台 升级困难 (审核) ...

  8. react学习(二)--元素渲染

    元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...

  9. React Hooks --- useState 和 useEffect

    首先要说的一点是React Hooks 都是函数,使用React Hooks,就是调用函数,只不过不同的Hooks(函数)有不同的功能而已.其次,React Hooks只能在函数组件中使用,函数组件也 ...

随机推荐

  1. BZOJ.5110.[CodePlus2017]Yazid 的新生舞会(线段树/树状数组/分治)

    LOJ BZOJ 洛谷 又来发良心题解啦 \(Description\) 给定一个序列\(A_i\).求有多少个子区间,满足该区间众数出现次数大于区间长度的一半. \(n\leq5\times10^5 ...

  2. Centos7安装InfluxDB1.7

    Centos7安装InfluxDB1.7 本操作参照InfluxDB官网:InfuxDB 使用的Red Hat和CentOS用户可以安装InfluxDB最新的稳定版本 yum包管理器: cat < ...

  3. django——FBV与CBV

    引言 FBV FBV(function base views) 就是在视图里使用函数处理请求. 在之前django的学习中,我们一直使用的是这种方式,所以不再赘述. CBV CBV(class bas ...

  4. 超小Web手势库AlloyFinger原理(转载)

    目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用. 感兴趣的同学可以去Github看看: https://github.com/AlloyTeam/AlloyF ...

  5. MYSQL 导入导出数据库文件

    一.从数据库导出数据库或表文件: mysqldump -u用戶名 -p密码 -d 数据库名 表名 > 脚本名; 导出整个数据库结构和数据mysqldump -h localhost -uroot ...

  6. ThinkPHP5 添加多个文字水印及疑难解答

    public function imageload() { $imgpath = ROOT_PATH . 'public' . DS . 'static' . DS . 'www' . DS . 'i ...

  7. MySQL执行计划复习

    MySQL执行计划分析 Ⅰ.认识执行计划的每个字段 (root@localhost) [(none)]> desc select 1; +----+-------------+-------+- ...

  8. Mysql5.8解压版安装问题:TCP/IP, --shared-memory, or --named-pipe should be configured on NT OS

    问题描述: cmd显示如下: .err文件显示: [ERROR] [MY-010131] [Server] TCP/IP, --shared-memory, or --named-pipe shoul ...

  9. [译]《Sphinx权威指南》 - Sphinx入门

    本章中,我们会讨论到Sphinx基础的安装.配置和维护.不要被“基础”这形容词糊弄而跳过这个章节.对于“基础”,我不是指简单到显而易见的东西,而是指所有人都会用到的功能. 一般来说,Sphinx会使用 ...

  10. django 缓存信号等

    参考别人的博客:写的挺好 http://www.cnblogs.com/wupeiqi/articles/5246483.html