主要是现在要改一个开源项目,需要学习下React入门,在此记录一下。
几个关键的库
React底层核心:react.development.js
React操作DOM库:react-dom.development.js
解析ES6语法:babel.min.js
React.createElement() //创建元素
如创建一个节点:
let hello = ReactDOM.createElement('h1', {}, 'Hello World')
ReactDOM.render() //渲染元素
如:
ReactDOM.render(hello, document.getElementById('app1'))
或如:
<script type = "text/babel">
ReactDom.render(
<h1>Hello World</h1>
document.getElementById('app');
)
</script>
React.Component //创建组建,使用extends继承
添加Class
<style>
.yellow{
Color: yellow;
}
</style>
ES5:
let hello = React.createElement(
'h1',
{
className: 'yellow'
},
ReactDOM.render(hello, document.getElementById('app'));
)
ES6:
let world = 'world'
let hello = <h1 className="yellow">Hello {world}</h1>
ReactDOM.render(
template,
Document.getElementById('app')
)
元素渲染(数据动态更新)
function tick(){
let time = new Date().toLocaleTimeString();
let template = <div>
<h1 className=”red”>Hello world</h1>
<h2>现在是: {time}</h2>
</div>
ReactDOM.render(
template,
Document.getElementById('app')
)
}
setInterval(tick, 1000)
组件
React中组件:
无状态组件(函数式组件):
①直接定义函数的形式,不存在state,只会有props,没有生命周期;
②只展示不修改用无状态组件;
③传值时无状态组件取值用props.属性。
有状态组件(React.Component):
①使用class定义,extends继承,有state进行数据的存储和管理,还可以用props,有生命周期;
②不仅仅展示,还要修改,用无状态组建。文章来源:https://www.toymoban.com/news/detail-649174.html
③传值时有状态组件取值用this.state或this.props.属性。文章来源地址https://www.toymoban.com/news/detail-649174.html
无状态组建
<div id="app1"></div>
<script type="text/babel">
//函数式组建
function Hello(){
return <h1>Hello World</h1>
}
ReactDOM.render(
<Hello/>,
Document.getElementById('app1')
)
</script>
如props传值(无状态组建)
<div id="app1"></div>
<script type="text/babel">
//函数式组建
function Hello(){
return <div>
<h1>姓名:{props.name}</h1>
<h2>年龄:{props.age}</h1>
</div>
}
ReactDOM.render(
<Hello name="it1995" age="18" />,
Document.getElementById('app1')
)
</script>
如有状态组建
<div id="app1"></div>
<script type="text/babel">
class Hello extends React.Component {
//有状态组建需要使用render方法,是生命周期的底层方法
render(){
return <h1>Hello World</h1>
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('app1')
)
</script>
如props传值(有状态组件)
<div id="app1"></div>
<script type="text/babel">
class Hello extends React.Component {
//有状态组建需要使用render方法,是生命周期的底层方法
render(){
return <div>
<h1>姓名:{this.props.name}</h1>
<h1>年龄:{this.props.age}</h1>
</div>
}
}
ReactDOM.render(
<Hello name="it1995" age="18"/>,
document.getElementById('app1‘’)
)
</script>
事件处理
<div id="app1"></div>
<script type="text/babel">
class Hello extends React.Component {
constructor(props){
super(props) //需要先让父类先处理下
this.state = { //这种情况,只能放到this.state中
name: ‘it1995’,
age: 20
}
this.updateInfo = this.updateInfo.bind(this)
}
updateInfo = () =>{
this.setState({ //这里必须用setState
name: 'it1995',
age: 18
})
}
updateInfo2(){ //如果这样定义函数
this.setState({ //这里必须用setState
name: 'it1995',
age: 18
})
}
updateInfo3(){ //如果这样定义函数
this.setState({ //这里必须用setState
name: 'it1995',
age: 18
})
}
updateInfo4(){ //如果这样定义函数
this.setState({ //这里必须用setState
name: 'it1995',
age: 18
})
}
//有状态组建需要使用render方法,是生命周期的底层方法
render(){
return <div>
<h1>姓名:{this.state.name}</h1>
<h1>年龄:{this.state.age}</h1>
<button onClick={this.updateInfo}>更新数据</button>
<button onClick={this.updateInfo2}>更新数据</button>
<button onClick={()=>this.updateInfo3()}>更新数据</button>
<button onClick={this.updateInfo4()}>更新数据</button>
</div>
}
}
ReactDOM.render(
<Hello name="it1995" age="18"/>,
document.getElementById('app1')
)
</script>
列表渲染
<div id="app1"></div>
<script type="text/babel">
class Hello extends React.Component {
state = {
list: [1, 2,3,4,5]
}
//有状态组建需要使用render方法,是生命周期的底层方法
render(){
const arr = this.state.list
const lists = []
for(let i = 0; i < arr.length; i++){
let li = <li>{arr[i]}</li>
lists.push(li)
}
return <div>
<ul>
{lists}
</ul>
</div>
}
}
ReactDOM.render(
<Hello />,
document.getElementById('app1')
)
</script>
循环Key的使用
<div id="app1"></div>
<script type="text/babel">
class Hello extends React.Component {
state = {
list: [1, 2,3,4,5]
}
//有状态组建需要使用render方法,是生命周期的底层方法
render(){
const arr = this.state.list
const lists = []
arr.map((item, index) => {
let li = <li key={index}>{item}</li>
lists.push(li);
})
return <div>
<ul>
{lists}
</ul>
</div>
}
}
ReactDOM.render(
<Hello />,
document.getElementById('app1')
)
</script>
列表循环
<div id="app1"></div>
<script type="text/babel">
class Hello extends React.Component {
state = {
list: [
{id: 1, txt: "Java"},
{id: 2, txt: "C/C++"},
{id: 3, txt: "JavaScript"}
]
}
//有状态组建需要使用render方法,是生命周期的底层方法
render(){
const arr = this.state.list
const lists = []
arr.map((item, index) => {
let li = <li key={index.id}>{item.txt}</li>
lists.push(li);
})
return <div>
<ul>
{lists}
</ul>
</div>
}
}
ReactDOM.render(
<Hello />,
document.getElementById('app1')
)
</script>
条件处理
<div id="app1"></div>
<script type="text/babel">
function Login(){
return <button>Login</button>
}
function Logout(){
return <button>Logout</button>
}
class App extends React.Component {
state = {
isLogin: true
}
//有状态组建需要使用render方法,是生命周期的底层方法
render(){
const {isLogin} = this.state
return <div>
{isLogin ? <Login/> : <Logout/>}
</div>
}
}
ReactDOM.render(
<App/>,
document.getElementById('app1')
)
</script>
优化写法
<div id="app1"></div>
<script type="text/babel">
function Login(){
return <button>Login</button>
}
function Logout(){
return <button>Logout</button>
}
class App extends React.Component {
state = {
isLogin: true
}
//有状态组建需要使用render方法,是生命周期的底层方法
render(){
const isLogin = this.state.isLogin
let button
if(isLogin)
Button = <Login/>
else
Button = <Logout/>
return <div>
{button}
</div>
}
}
ReactDOM.render(
<App/>,
document.getElementById('app1')
)
</script>
条件&事件处理
<div id="app1"></div>
<script type="text/babel">
function Login(){
return <button>Login</button>
}
function Logout(){
return <button>Logout</button>
}
class App extends React.Component {
state = {
isLogin: true
}
updateInfo1 = () =>{
this.setState({
isLogin: !this.state.isLogin
})
}
updateInfo2(){
this.setState({
isLogin: !this.state.isLogin
})
}
//有状态组建需要使用render方法,是生命周期的底层方法
render(){
const isLogin = this.state.isLogin
return <div>
{isLogin ? <Login/> : <Logout/>}
<button onClick={this.updateInfo1}>更新数据</button>
<button onClick={this.updateInfo2.bind(this)}>更新数据</button>
</div>
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
)
</script>
到了这里,关于React笔记-React入门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!