前端-React(基础知识)
- React 是一个用于构建用户界面的 JAVASCRIPT 库。
- 用 DOM 的方式将需要的组件秒加，用不着的秒删。React 扮演着 MVC 结构中 V 的角色
- React 是一个用于构建用户界面的 JAVASCRIPT 库。
- JSX 是 JavaScript 语法的扩展。
在开始学习 React 之前，您需要具备以下基础知识：
HTML5
CSS
JavaScript
基本含义：
- create-react-app 项目名 创建
- render 函数即渲染函数，程序主入口，对模板进行渲染
- *let 和 const：*通过 const 定义的变量与 let 变量类似，但不能重新赋值
jsx特点
花括号{}
别名：className 代替class ，htmlFor代替html。
例子
结果：
html被编译成什么呢？
这里，Welcome不是字符串，是一个构造方法，所以首字母是大写
这些object也就是ReactElement对象，通过React.createElement方法与conponent的jsx代码互换，同样可以运行。
综上所述：
- jsx是一种语法糖-React.createElement()的语法糖，
- ReactElement对象，本质上也是js的object。复杂的jsx，也就是object嵌套
Props/State/Forms 属性和状态
Props(属性)
- 组件像一个函数一样，接收特定的输入（Props），产生特定的输出（react elements）
- V=f(props)
- 在一个组件中props是不可变的
npm install bootstrap --save
例子：
函数式声明方式：
const NameCard = {props}=>{
return(内容)
}
纯函数值不能被改变
react-Component，所有的组件必须像纯函数一样使用props，在一个组件中props是不可变的，state却可以在不改变上述条件下使组件动态的输出
state状态
比如下拉菜单的显示隐藏，一组数据的加载（loading，再显示数据），之前只有一种方法更新界面，就是调用ReactDOM.Rander方法.
- 状态是私有的完全受控于当前组件，可以动态改变。
- 属性是外部传入的，不可改变
- 更新状态的唯一方法就是this.setState()
实例：完成点赞按钮
区别：
js: οnclick=“increasLikes()”
react：onClick={this.increasLikes}
class LikesButton extends React.Component{constructor(props){super(props)this.state={likes:0}this.increasLikes=this.increasLikes.bind(this)}increasLikes(){// this.setState({// likes:++this.state.likes// })alert("你好")console.log(this) // this是没有绑定的返回undefined}render() {return(<div><buttontype="button"className="buttons btn-lg"onClick={this.increasLikes}>👍{this.state.likes}</button></div>)}
}
export default LikesButton;
在js的类中，this是没有自动绑定的，所以当访问回调函数onClick={this.increasLikes}时，返回是undefined，手动绑定
this.increasLikes=this.increasLikes.bind(this)
方法2：
es6有箭头函数的概念，就不需要额外绑定了
onClick={()=>{this.increasLikes()}}
最终效果：
class LikesButton extends React.Component{constructor(props){super(props)this.state={likes:0}}increasLikes(){this.setState({likes:++this.state.likes})}render() {return(<div><buttonclassName="buttons"onClick={()=>{this.increasLikes()}}>👍{this.state.likes}</button></div>)}
}
export default LikesButton;
生命周期
import React from 'react'class DigitalClock extends React.Component{constructor(props){super(props)this.state={date:new Date()}}componentDidMount() {this.timer=setInterval(()=>{this.setState({date:new Date()})},1000)}componentDidUpdate(prevProps, prevState, snapshot) {console.log(prevState)}componentWillUnmount() {clearInterval(this.timer)}render() {return(<div><h1>{this.state.date.toLocaleTimeString()}</h1></div>)}}
export default DigitalClock;
forms表单
受控组件
import React from 'react'//受控组件
class CommentBox2 extends React.Component{constructor(props){super(props)this.handlesub=this.handlesub.bind(this)this.state={value:''}}handlesub(ev){
alert(this.state.value)ev.preventDefault()}render() {return(<form onSubmit={this.handlesub}><div><label>留言内容</label><input type='text' placeholder='请输入内容' value={this.state.value} onChange={(event)=>{this.setState({value:event.target.value})}} /><button type='submit'>留言</button></div></form>)}
}
export default CommentBox2
非受控组件
import React from 'react'//非受控组件
class CommentBox2 extends React.Component{constructor(props){super(props)this.handlesub=this.handlesub.bind(this)}handlesub(ev){
alert(this.textinput.value)ev.preventDefault()}render() {return(<form onSubmit={this.handlesub}><div><label>留言内容</label><input type='text' placeholder='请输入内容' ref={(textinput)=>{this.textinput=textinput}} /><button type='submit'>留言</button></div></form>)}
}
export default CommentBox2
留言本实例，父子组件
App.js
import logo from './logo.svg';
import './App.css';
import React,{Component} from 'react'
import CommentList from './component/LiuYanBen/CommentList'
import CommentBox from './component/CommentBox'
class App extends Component {constructor(props){super(props)this.state={comments:['this is my first reply']}this.onAddComment=this.onAddComment.bind(this)}onAddComment(comment){this.setState({comments:[...this.state.comments,comment]})}render() {const {comments}=this.statereturn (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo"/><p>Edit <code>src/App.js</code> and save to reload.</p><a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer"></a></header><CommentList comments={comments}/><CommentBox commentsLength={comments.length} onAddComment={this.onAddComment} /></div>);}
}
export default App;CommentList.js
import React from 'react'const CommentList=({comments})=>{return(<div><label>评论列表</label><ul>{comments.map((comment,index)=><li key={index}> {comment}</li>)}</ul></div>)
}
export default CommentList
CommentBox.js
import React from 'react'class CommentBox extends React.Component{constructor(props){super(props)this.handlesub=this.handlesub.bind(this)this.state={commentsLength:this.props.commentsLength}}handlesub(ev){this.props.onAddComment(this.textinput.value)ev.preventDefault()}render() {return(<form onSubmit={this.handlesub}><div><label>留言内容</label><input type='text' placeholder='请输入内容' ref={(textinput)=>{this.textinput=textinput}} /><button type='submit'>留言</button></div><p>已有{this.state.commentsLength}条评论</p></form>)}
}
export default CommentBox
Context
- prop属性是由上而下单向传递的
- context提供了在组件中共享此类值的方法
- 目的：共享那些对于组件来说全局共享的数据
AppButton.js
import React,{Component} from 'react'
import ThemeContext from'../../theme-context'
import ThemedBar from './ThemedBar'const themer={light:{background:"blue",color:"red"},dark:{background:"black",color:"yellow"}}class AppButton extends Component{constructor(props){super(props)this.state={theme:'light'}this.changeTheme=this.changeTheme.bind(this)}changeTheme(themer){this.setState({theme:themer})}render() {return(<ThemeContext.Provider value={themer[this.state.theme]}><div><button onClick={()=>{this.changeTheme("light")}}>浅色主题</button><button onClick={()=>{this.changeTheme("dark")}}>深色主题</button><ThemedBar/></div></ThemeContext.Provider>)}
}
export default AppButton
ThemedBar.js
import React from 'react'
import ThemeContext from '../../theme-context'const ThemedBar =()=>{return(<ThemeContext.Consumer>{theme=>{return(<div style={{backgroundColor:theme.background,color:theme.color}}>样式区域<button color={theme.color}>样式按钮</button></div>)}}</ThemeContext.Consumer>)}
export default ThemedBar
ThemeContext.js
import React from 'react'const ThemeContext=React.createContext()export default ThemeContext
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！