<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello_react</title>
<!-- 引入react,为了使用 React对象 -->
<script src="js/react.development.js"></script>
<!-- 引入 react-dom, 为了使用 ReactDOM 对象 -->
<script src="js/react-dom.development.js"></script>
<!-- 引入 babel， 为了 解析 JSX -->
<script src="js/babel.min.js"></script>
<!-- 引入prop-types，为了对 props属性的类型、必要性、默认值进行限制，全局多了一个 PropTypes对象 -->
<script src="js/prop-types.js"></script>
</head>
<body>
<div id="test"></div>
<div id="test2"></div>
<!-- 1. props的基本使用 -->
<!-- <script type="text/babel">
// 创建组件
class Demo extends React.Component {
render() {
console.log(this)
const {name, age, sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
<li>性别：{sex}</li>
</ul>
)
}
}
// 把组件渲染到页面
ReactDOM.render(<Demo name="tom" age="19" sex="男"/>, document.getElementById('test'))
// 在使用组件标签时，react帮你把所有你写的key-value属性都自动搜集到了 this.props即组件实例的props属性上。
// 你敢传递标签属性，人家react就能帮你收集成对象给你放在props属性里面
</script> -->
<!-- 2. 批量传递props、批量传递标签属性-->
<!-- <script type="text/babel">
// 创建组件
class Demo extends React.Component {
render() {
console.log(this)
const {name, age, sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
<li>性别：{sex}</li>
</ul>
)
}
}
let p = {name: '老刘', age: 20, sex: '女'}
// 把组件渲染到页面
ReactDOM.render(<Demo name="tom" age="19" sex="男"/>, document.getElementById('test'))
// 在react+babel结合之后，只允许使用展开运算符在标签上展开一个对象。
// 注意，这里的 {}不是复制对象，而是react中js表达式中的{}
ReactDOM.render(<Demo {...p}/>, document.getElementById('test2'))
</script> -->
<!-- 3. 复习展开运算符 -->
<!-- <script type="text/javascript">
// 1.展开数组
// let arr1 = [1,3,5,7,9]
// let arr2= [2,4,6,8,10]
// console.log(...arr1)
// 2.合并数组
// let arr3 = [...arr1, ...arr2]
// console.log(arr3)
// 3.函数传参
// function sum(...numbers) {
// console.log(numbers)
// }
// sum(1,2)
// 4. 不能直接展开对象
// let obj = {a: 1, b: '2'}
// console.log(...obj) // 报错
// 5. 可以使用 {} 包裹...obj，实现复制对象
// let obj = {a: 1, b: '2'}
// let obj2 = {...obj}
// obj.a = 3
// console.log(obj2)
// 6. 对象引用关系的传递
// let obj = {a: 1, b: '2'}
// let obj2 = obj
// obj.a = 3
// console.log(obj2)
// 7. 复制对象并修改属性
// let obj = {a: 1, b: '2'}
// let obj2 = {...obj, a: '3'}
// console.log(obj2)
</script> -->
<!-- Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，
React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。
当向 props 传入无效数据时，JavaScript 控制台会抛出警告。 -->
<!-- 4. 对标签属性的“类型”、"必要性"、“默认值”进行限制 -->
<!-- <script type="text/babel">
// 创建组件
class Demo extends React.Component {
render() {
const {name, age, sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age+1}</li>
<li>性别：{sex}</li>
</ul>
)
}
}
// 跟组件本身对话，添加propTypes属性。此属性是react规定的，在使用组件标签new实例时，react底层会去查找这个 propTypes属性。若类本身有这个属性，则react会根据属性中的规则，帮你限制props
// 若组件本身没有propTypes属性，则react不会帮你对props做限制
Demo.propTypes = {
name: PropTypes.string.isRequired, // 这里的PropTypes对象，是 prop-types.js 中提供的。
age: PropTypes.number
}
// 在组件自身，添加defaultProps属性
Demo.defaultProps = {
sex: '不男不女'
}
let p = {name: '老刘', age: 20, sex: '女'}
// 把组件渲染到页面
ReactDOM.render(<Demo name="tom" age={19}/>, document.getElementById('test'))
ReactDOM.render(<Demo {...p}/>, document.getElementById('test2'))
</script> -->
<!-- 5. props是只读的 -->
<!-- <script type="text/babel">
// 创建组件
class Demo extends React.Component {
render() {
const {name, age, sex} = this.props
// this.props.name = "jerry" // 报错：props只读，不能做任何修改
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age+1}</li>
<li>性别：{sex}</li>
</ul>
)
}
}
Demo.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
}
Demo.defaultProps = {
sex: '不男不女'
}
// 把组件渲染到页面
ReactDOM.render(<Demo name="tom" age={19}/>, document.getElementById('test'))
</script> -->
<!-- 6. props简写 -->
<!-- <script type="text/babel">
// 创建组件
class Demo extends React.Component {
// 通过static关键字给类自身添加 propTypes属性 和 defaultProps属性
// react不关注你是通过什么方式[static或者组件.]给类自身添加这两个属性的。只要类身上有这两个属性，react就都会帮你对prop属性做限制
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
}
static defaultProps = {
sex: '不男不女'
}
render() {
const {name, age, sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age+1}</li>
<li>性别：{sex}</li>
</ul>
)
}
}
// 把组件渲染到页面
ReactDOM.render(<Demo name="tom" age={19}/>, document.getElementById('test'))
</script> -->
<!-- 7.函数式组件中的props -->
<!-- <script type="text/babel">
// 函数式组件只可以玩 props,但不能玩state 和 refs
// 因为函数可以接收参数
function Demo(props) {
console.log(props) // 函数式组件，react把组件标签上的key-value都自动搜集到了参数props中
const {name, age} = props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
<li>性别：???</li>
</ul>
)
}
ReactDOM.render(<Demo name="tom" age={19}/>, document.getElementById('test'))
</script> -->
<!-- 8.函数式组件对props做限制 -->
<!-- <script type="text/babel">
function Demo(props) {
const {name, age, sex} = props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age}</li>
<li>性别：{sex}</li>
</ul>
)
}
// 函数式组件，对props进行限制，只能在组件外部使用.语法给类自身加 propTypes和defaultProps属性
Demo.propTypes = {
name: PropTypes.string.isRequired
}
Demo.defaultProps = {
sex: '不男不女'
}
ReactDOM.render(<Demo name="jerry" age={19}/>, document.getElementById('test'))
</script> -->
<!-- 9.构造器与props -->
<script type="text/babel">
class Demo extends React.Component {
constructor(props) {
console.log(props)
super()
console.log(this.props) // undefined
// 构造器中是否接收props，是否传递给super,取决于：是否希望在构造器中通过this访问props
}
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
}
static defaultProps = {
sex: '不男不女'
}
render() {
const {name, age, sex} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>年龄：{age+1}</li>
<li>性别：{sex}</li>
</ul>
)
}
}
ReactDOM.render(<Demo name="jerry" age={19}/>, document.getElementById('test'))
</script>
</body>
</html>