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,则变成
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步