// 1、创建函数式组件
function MyFunctionConponent() {
  // 此处的this是undefined，因为babel编译后开启了严格模式。use 'strict'
  console.log(this);
  return <h2>这是展示的内容</h2>
}
// 2、渲染组件到页面
// 注意，下面这么些没有调用函数，react会帮我们自己调用的。
ReactDOM.render(<MyFunctionConponent/>, document.getElementById("test"));  // 后面的那个是父容器


// a、2中执行了React解析组件标签，找到了MyFunctionConponent组件
// b、发现组件时使用函数定义的，随后调用该函数，将返回的虚拟DOM专为真实DOM，然后呈现在页面中。

// 1、创建类式组件，类名就是组件名，需要继承，需要写render，render一定要有返回值
// 可以打开React中文网，看例子等等
class MyClassComponent extends React.Component {
  render() {
    // render方法放在了哪里？类的原型对象上MyClassComponent，供实例使用
    // 但是2中我没有显示创建呀？
    // render中的this是谁？MyClassComponent组件实例对象
    console.log(this);
    return <h2>这是显示的内容</h2>
  }
}

// 2、渲染组件到页面
ReactDOM.render(<MyClassComponent/>, document.getElementById('test'))

// 执行了ReactDOM.render后发生了什么？
// a、2中执行了React解析组件标签，找到了MyClassComponent组件
// b、发现组件时使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
// 将render返回的虚拟DOM专为真实DOM，然后呈现在页面中。

class Weather extends React.Compomnent {
  constructor(props) {
    super(props)
    this.state = {isHot: true}
  }
  render() {
    return <h2>今天天气很{this.state.isHot ? "炎热" : "凉爽" }</h2>
  }
}

class Person {
  constructor(name, age) {
    this.name = name
    this .age = age
    // 否则speak的this在回调的时候是undefined。
    // 所以简写下面这个bind，因为这些类中的方法基本上都是要绑定的，不然没意思。
    this.speak = this.speak.bind{this}
  }

  speak() {
    console.log(this)
  }
}

const p1 = new Person('tom', 18)  // 这个属于实例调用
const x = p1.study
x()  // 这个属于函数的直接调用（本来this指向Window），但是类中所有定义的方法在局部都开启了严格模式，所以this变成了undefined。 可以修改成
const x = Person.bind({name: 's', age: 19}) // .bind返回一个新的函数
x()

// 所以说，在继承Component的类中，绑定事件，onClick={this.speak}，这个回调的this是undefined了，所以报错。
// 所以在constructor初始化方法中，绑定this
// 这么做了之后，原型上的方法得有，拿着原型上的，生成一个新的，挂在自身实例上，所以onclick后面调用的是挂在自身实例上的。 注意是生成了挂在实例自身的一个函数。
this.speak = this.speak.bind{this}

class Weather extends React.Component() {
  constructor(props) {
    super(props)
    this.state = {isHot: false, wind: '微风'}
    this.changeWeather.bind(this)
  }
  
  render() {
    const {isHot, wond} = this.state
    return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h1>
  }
  
  // 放在原型对象上，供实例使用
  changeWeather() {
    const isHot = this.state.isHot
    this.setState(isHot: !isHot)
  }
}

ReactDOM.render(<Weather/>, document.getElementById('test'))

class Weather extends React.Component() {
  constructor(props) {
    super(props)
    // this.state = {isHot: false, wind: '微风'}
    // this.changeWeather.bind(this)
  }
  
  // 这句话放到这里，不用在构造器里。放在实例自身上。
  state = {isHot: false, wind: '微风'}
  render() {
    const {isHot, wond} = this.state
    return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h1>
  }
  
  // 放在实例自身，但是不能用普通函数function，得用箭头函数
  // 箭头函数没有自己的this，找起外层函数的this作为自己的this使用。此处外层的this就是Weather实例自身。
  // changeWeather = function() {
  changeWeather = () => {
    const isHot = this.state.isHot
    this.setState(isHot: !isHot)
  }
}

ReactDOM.render(<Weather/>, document.getElementById('test'))

class Weather extends React.Component() {
  state = {isHot: false, wind: '微风'}
  
  render() {
    const {isHot, wond} = this.state
    return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h1>
  }
  
  changeWeather = () => {
    const isHot = this.state.isHot
    this.setState(isHot: !isHot)
  }
}

ReactDOM.render(<Weather/>, document.getElementById('test'))

class Person extends React.Component {
  render() {
    const {name, age, sex} = this.props
    
    return (
      <ul>
        <li>姓名：{this.name}</li>
      </ul>
    )
  }
}
// 这里面就直接传到props里面去了。
ReactDOM.render(<Person name="jerry"/>, document.getElementById("test"));

// 1、展开运算符 ...
let arr1 = [1, 2, 3, 4, 5]
console.log(arr1)  // 输出的是 [1, 2, 3, 4, 5]
console.log(...arr1) // 输出的是展开的 1, 2, 3, 4, 4
let arr2 = [3, 4, 5]

// 2、数组组合
let arr3 = [...arr1, ...arr2]


// 3、函数传参数
function sum(...nums) {
  console.log('@', nums)
  nums.reduce((preValue, currentValue) => {
    return preValue + currentValue;
  })
}
sum(1, 2, 3, 4)

// 但是展开对象好像不行？
let person = {name: '', age: 18}
let person2 = {...person}  // 包了一个花括号。深度拷贝，构造字面量对象时使用展开语法
let person3 = person. // 浅拷贝
// console.log(...person)  // 报错直接写一个...是不行的，不能展开一个对象

// 构造对象并且修改
let person4 = {...person, name:'jack', address: "地址"}

// 批量传递props，批量传递标签属性
// 但是，babel + js的，这里面的{...p}加了花括号也不是构造字面量对象，只是单纯的js+babel可以把对象展开了，但是不能log出来，仅适用于标签的适用对象。这是一个浅拷贝??
const p = {name: "我", age: 18, sex: '女'}
ReactDOM.render(<Person {...p}/>, document.getElementById('test'))

// 对标签属性进行类型、必要性的限制
Person.propTypes = {
  name: PropTypes.string.isRequired,  // name必须是字符串，而且必须有
  sex: PropTypes.string,              // 性别可以不传，有默认值，在下面
  age: PropTypes.number,
  speak: PropTypes.func               // 必须是函数，注意不是function这个关键字
}
// 指定默认标签属性值
Person.defaultProps = {
  sex: "default",
  age: 19
}

class Person extends React.Component {

  static propTypes = {
    name: PropTypes.string.isRequired, 
    sex: PropTypes.string,             
    age: PropTypes.number,
    speak: PropTypes.func               
  }

  static defaultProps = {
    sex: "default",
    age: 19
  }

  render() {
    const {name, age, sex} = this.props
    
    return (
      <ul>
        <li>姓名：{this.name}</li>
      </ul>
    )
  }
}

// 不过这两个都可以通过赋值语句不写在构造器里面
// 但是如果需要通过props设置state那估计就要写了吧？奥，不然也值语句写吧？
constructor(props) {
  super(props)
  this.state = {isHot: false, wind: '微风'}
  this.changeWeather.bind(this)
}

class Person extends React.Component {
  // 外面构建时，标签属性里的，还有模型加上的，都会在这个props里面收到
  constructor(props) {
    console.log(props)
    super(props)
    console.log(this.props) // 注意，这个是实例的props，需要在使用之前调用super(props)
  }

  static propTypes = {
    name: PropTypes.string.isRequired, 
    sex: PropTypes.string,             
    age: PropTypes.number,
    speak: PropTypes.func               
  }

  static defaultProps = {
    sex: "default",
    age: 19
  }

  render() {
    const {name, age, sex} = this.props
    
    return (
      <ul>
        <li>姓名：{this.name}</li>
      </ul>
    )
  }
}

function Person(props) {
    const {name, age, sex} = this.props
    
    return (
      <ul>
        <li>姓名：{name}</li>
        <li>年龄：{age}</li>
      </ul>
    )
  )
}

// 然后属性限制啥的，可以写在外面，奏效
Person.propTypes = {
  name: PropTypes.string.isRequired,
  sex: PropTypes.string, 
  age: PropTypes.number,
  speak: PropTypes.func
}
Person.defaultProps = {
  sex: "default",
  age: 19
}

ReactDOM.render(<Person name="jerry" sex="女" age={18}/>, document.getElementById("test"));

class Demo extends React.Component {
  showData = () => {
    // const input = document.getElementById('input1')
    // alert(input.value)
    console.log(this)
    console.log(this.refs.input1)  // 就能访问到下面那个了
    const {input1} = this.refs;
    alert(input1.value)
  }
  
  showData2 = () => {
    const {input2} = this.refs;
    alert(input2.value)
  }
  // onBlur是失去焦点回调
  render() {
    return (
      <div>
          <input ref='input1'/>&nbsp;
        	<input ref='input2' onBlur={this.showData2}/>&nbsp; 
      </div>
    )
  }
}

// 1、回调。可以先这样看看这个a是什么，a是input这个节点本身
<input ref=={(a)=>{console.log(a)}} type="test" placeholder="点击输入"/>

// 2、所以把这个a给组件实例自身
<input ref=={currentNode => this.input1 = currentNode } type="test" placeholder="点击输入"/>

// 3、然后可以用this.input1访问到

const saveInput = (currentNode) => {
  this.input1 = currentNode
}

<input ref = { this.saveInput } type="test" placeholder="点击输入"/>

// React.createRef调用后可以返回一个容器，容器可以存储被ref所标识的节点
// 注意，容器只能存储一个，后放进去的会把前面的顶掉
// 要多个就多个容器呗
myRef = React.createRef调用后可以返回一个容器，容器可以存储被ref所标识的节点()
// 此处把这个input节点存储在this.myRef容器里面
<input ref = { this.myRef } type="test" placeholder="点击输入"/>

// 使用，下面打印的就是input节点。
console.log(this.myRef.current)

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
	document.getElementById('root')
);