在学习react的路上越走越远 之 初识React
一个初始的最简单的小案例
(记录学习过程)
在页面点击事件更改文字的值
学习视频:是视频的地址!(话说应该不涉及侵权把
先引入库:
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-DOM库 -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel库,用于把jsx -> js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
主要代码:
<div id = "box"></div>
<script type="text/babel">
class TWhether extends React.Component {
//构造器只调用一次
constructor(props){
super(props)
this.state = {isHot:false,wind:"weifeng"}
this.demo = this.demo.bind(this)
//bind生成了一个新的函数,所以this.demo指实例对象
}
render() {
//render调用1+n次
const{isHot,wind} = this.state
return <h1 onClick = {this.demo}>今天天气很{this.state.isHot ? '炎热' : '寒冷'},{wind}</h1>
}
//demo作为onClick的回调,不是通过实例调用的,而是直接调用,而且局部开启了严格模式,所以demo中的this是undefined
demo() {
const isHot = this.state.isHot;
//状态必须通过setState修改
console.log(this.state);
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<TWhether/>,document.getElementById('box'))
</script>`
老师讲的细但听的也云里雾里,所以这稍作总结(
1、.bind返回了一个新函数,所以使this.demo指实例对象。(为了解决this.demo为undefined的问题)
2、构造器被调用了一次,render被调用了1(首次执行)+ n(点击次数)次,demo()被调用了n次。
3、当在需要更改的对象后再增加一个对象时,新增不会受到影响。
4、改变状态需要使用一个内置API即setState
5、构造器–>初始化状态和解决this指向问题
render–>render里的this是组件实例对象 and 作显示
demo()–>获取state值 and 状态更新
渲染结尾,over.
继续前一天的内容
props的基本使用
先直接贴代码了(主要部分的代码)
<script type="text/babel">
class Person extends React.Component {
render() {
const{name,sex,age} = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age + 1}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
//对标签属性进行类型,必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string,
speak: PropTypes.func,
}
// 指定默认标签属性值
Person.defaultProps = {
sex:"xxx"
}
ReactDOM.render(<Person name = "tom" speak = {speak} age = {10}/>,document.getElementById('box1'))
ReactDOM.render(<Person name = "tom2" sex = "femal" age = {14}/>,document.getElementById('box2'))
const p1 = {name:"hey",age:14,sex:"femal"}
ReactDOM.render(<Person {...p1}/>,document.getElementById('box3'))
function speak() {
console.log("woshuohua1l1!");
}
</script>
然后是简写的最后部分:
<script type="text/babel">
class Person extends React.Component {
render() {
const{name,sex,age} = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age + 1}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
//对标签属性进行类型,必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string,
speak: PropTypes.func,
}
// 指定默认标签属性值
Person.defaultProps = {
sex:"xxx"
}
ReactDOM.render(<Person name = "tom" speak = {speak} age = {10}/>,document.getElementById('box1'))
ReactDOM.render(<Person name = "tom2" sex = "femal" age = {14}/>,document.getElementById('box2'))
const p1 = {name:"hey",age:14,sex:"femal"}
ReactDOM.render(<Person {...p1}/>,document.getElementById('box3'))
function speak() {
console.log("woshuohua1l1!");
}
</script>
注:props是只读不可写的
初学react基本上也是跟着敲的,留档,自看。