react知识总结
用于构建用户界面的 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知识总结的更多相关文章
- React知识杂烩(持续更新)
每隔半年不看官方文档,你就会不认识React了
- vue和react全面对比(详解)
vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...
- Vue于React特性对比(二)
一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...
- react 入门与进阶教程
react 入门与进阶教程 前端学习对于我们来说越来越不友好,特别是随着这几年的发展,入门门槛越来越高,连进阶道路都变成了一场马拉松.在学习过程中,我们面临很多选择,vue与react便是一个两难的选 ...
- React入门 (2)—实现微博展示列表
前言 如果从来不了解React先看前篇React入门 (1)-使用指南(包括ES5和ES6对比). 本文为了能将前篇学到的react知识学以致用,做了一个类似微博展示列表的demo.使用的是ES6+R ...
- vue、React Nactive的区别(转载)
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
- Weex 和 React Native 的比较看这里
写在前面 目前主流的应用大体分成三类:Native App, Web App, Hybrid App. Native App 特点: 性能好 完美的用户体验 开发成本高,无法跨平台 升级困难 (审核) ...
- react学习(二)--元素渲染
元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...
- React Hooks --- useState 和 useEffect
首先要说的一点是React Hooks 都是函数,使用React Hooks,就是调用函数,只不过不同的Hooks(函数)有不同的功能而已.其次,React Hooks只能在函数组件中使用,函数组件也 ...
随机推荐
- 取消layUI中日期选择控件默认填充日期
input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效 ...
- javascript事件之调整大小(resize)事件
当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件. var EventUtil = { addHandler: function (element, type, handler) { ...
- 什么是 B 树?
本文提到的「B-树」,就是「B树」,都是 B-tree 的翻译,里面不是减号-,是连接符-.因为有人把 B-tree 翻成 「B-树」,让人以为「B树」和「B-树」是两种树,实际上两者就是同一种树. ...
- HBase scan 时 异常 ScannerTimeoutException 解决
org.apache.Hadoop.hbase.client.ScannerTimeoutException: 60622ms passed since the last invocation, ti ...
- jenkins-参数化构建(二)插件:Extended Choice Parameter
一.Extended Choice Parameter插件 这个插件相对丰富,安装过程就不过多介绍了,在点击项目设置后会出现下载的插件名字. 写在文件中构建时效果如下:
- javascript的数组之slice()
slice()方法创建一个新数组,将原数组的部分元素拷贝到新数组,并将新数组返回,且原数组不会被修改. var animals = ['ant', 'bison', 'camel', 'duck', ...
- Spark 实现wordcount
配置完spark之后,使用spark实现wordcount,这一部分完全参考<深入理解Spark:核心思想与源码分析> 依然使用hadoop wordcountTest的那几个txt文件 ...
- python中的基础2
2 2.1 字符串的索引与切片: a = 'ABCDEFGHIJK' print(a[0]) print(a[3]) print(a[5]) print(a[7]) 2.2 字符串的常用方法. pr ...
- Android 一个日历控件的实现代码
转载 2017-05-19 作者:Othershe 我要评论 本篇文章主要介绍了Android 一个日历控件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看 ...
- Java集合-treebag
import org.apache.commons.collections4.Bag; import org.apache.commons.collections4.bag.TreeBag; impo ...