React

// 1. 先创建函数，函数可以有参数，也可以没有，但是必须要有返回值 返回一个虚拟 DOM
function MyComponent(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 2. 渲染组件到页面
ReactDOM.Render(<MyComponent name = "world" />,document.getElementById("div"));

// 1. 创建类式组件
class MyComponent extend React.Component {
  render() {
    // render 是放在 MyComponent 原型对象上的，供示例使用
    // remder 中的 this 是当前组件的实例对象
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// 2. 渲染组件到页面
ReactDOM.Render(<MyComponent name = "world" />,document.getElementById("div"));
/*
  执行了 ReactDOM.Render 方法后，React 解析组件标签，找到了 MyComponent 组件，并且发现组件是使用类定义的，随后 new 出 MyComponent 类的实例，并且调用了实例的 render 方法，将 render 方法的返回的虚拟 DOM 转为真实 DOM，随后渲染到页面中
*/

// 1. 创建组件
class Weather extends React.Component {
  // 调用 1 次
  constructor(props){
    super(props);
    // 初始化状态
    this.state = {
      isHot: false,
      wind: "微风",
    };
    // 解决 changeWeather 中 this 指向问题
    this.changeWeather = this.changeWeather.bind(this);
  }
  // 调用 1 + N 次
  render() {
    // 读取状态
    const { isHot, wind } = this.state;
    return <h1 onClick={this.changeWeather}>今天天气很{isHot ? "炎热" : "凉爽"}, {wind}</h1>;
  }

  // changeWeather 放在 Weather 原型对象上，供实例使用
  // 由于 changeWeather 是作为 onClick 的回调函数，所以不是通过实例调用，而是直接调用
  // 由于类中的方法默认开启了局部严格模式，所以 changeWeather 中的 this 指向 undefined
  // 调用 N 次
  changeWeather(){
    // 获取原来的 isHot 值
    const isHot = this.state.isHot;
    // 严重注意：状态必须通过 setState() 来更新，且更新是一种合并，不是替换
    this.setState({
      isHot: !isHot,
    });
  }
}

// 2. 渲染组件到页面
ReactDOM.Render(<Weather />,document.getElementById("div"));

// 1. 创建组件
class Weather extends React.Component {
  // 初始化状态
  state = {
    isHot: false,
    wind: "微风",
  };

  render() {
    // 读取状态
    const { isHot, wind } = this.state;
    return <h1 onClick={this.changeWeather}>今天天气很{isHot ? "炎热" : "凉爽"}, {wind}</h1>;
  }

  // 自定义方法：要用赋值语句的形式 + 箭头函数
  changeWeather = ()=>{
    const isHot = this.state.isHot;
    this.setState({
      isHot: !isHot,
    });
  }
}

// 2. 渲染组件到页面
ReactDOM.Render(<Weather />,document.getElementById("div"));

// 1. 创建组件
class Person extends React.Component {
  render(){
    // 也可以这样获取
    // const {name,age,sex} = this.props
    return (
      <ul>
        <li>{this.props.name}</li>
        <li>{this.props.age}</li>
        <li>{this.props.sex}</li>
      </ul>
    )
  }
}

// 2. 渲染组件到页面
ReactDOM.Render(<Person name="zhang" age="20" sex="male" />,document.getElementById("div"));

// 1. 创建组件
class Person extends React.Component {
  // // 通常构造器可以不写
  // constructor(props){
  //   // 构造器是否接受 props，是否传递给 super，取决于是否希望在构造器中使用 this.props
  //   // console.log(props);
  //   super(props);
  //   // console.log("constructor",this.props);
  // }
  
  // 对标签属性进行类型、必要性的限制
  static propTypes = {
    name:PropTypes.string.isRequired, // 限制 name 属性必须是字符串，且必须传递
    age:PropTypes.number,             // 限制 age 属性必须是数值
    sex:PropTypes.string,             // 限制 sex 属性必须是字符串
  }

  // 指定默认标签属性值
  static defaultProps = {
    age: 18,      // age 默认值为 18
    sex: 'male',  // sex 默认值为男
  }

  render(){
    return (
      <ul>
        <li>{this.props.name}</li>
        <li>{this.props.age}</li>
        <li>{this.props.sex}</li>
      </ul>
    )
  }
}

// 2. 渲染组件到页面
const p = {name="zhang",age="20",sex="male"}
ReactDOM.Render(<Person {...p} />,document.getElementById("div"));

// 1. 创建组件
function Person (props) {
  render(){
    const {name,age,sex} = props
    return (
      <ul>
        <li>{name}</li>
        <li>{age}</li>
        <li>{sex}</li>
      </ul>
    )
  }
  // 对标签属性进行类型、必要性的限制
  Person.propTypes = {
    name:PropTypes.string.isRequired, // 限制 name 属性必须是字符串，且必须传递
    age:PropTypes.number,             // 限制 age 属性必须是数值
    sex:PropTypes.string,             // 限制 sex 属性必须是字符串
  }

  // 指定默认标签属性值
  Person.defaultProps = {
    age: 18,      // age 默认值为 18
    sex: 'male',  // sex 默认值为男
  }
}

// 2. 渲染组件到页面
ReactDOM.Render(<Person name="zhang" sex="male", age={20} />,document.getElementById("div"));

// 1. 字符串形式的 ref
<input ref="var1" />

// 2. 回调形式的 ref
<input ref={currentNode => this.var1 = currentNode } />

// 3. createRef 形式的 ref
var1 = React.createRef()
<input ref={this.var1} />

class Demo extends React.Component {

  // 回调形式的 ref
  showData = ()=>{
    const { input1 } = this
    alert(input1.value)
  }

  render(){
    return (
      <div>
        <input ref={currentNode => this.input1 = currentNode } type="text" placeholder="点击按钮提示数据"/>
        <button onClick={this.showData}>点我提示数据</button>
      </div>
    )
  }
}

class Demo extends React.Component {
  // 给 input 节点创建 ref 容器
  myRef = React.createRef();

  // 回调形式的 ref
  showData = ()=>{
    // current 关键字可以获取到 ref 容器中的 DOM 元素
    console.log(this.myRef.current.value);
  }

  render(){
    return (
      <div>
        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
        <button onClick={this.showData}>点我提示数据</button>
      </div>
    )
  }
}

class Demo extends React.Component {
  // 给 input 节点创建 ref 容器
  myRef = React.createRef();
  myRef2 = React.createRef();

  showData = ()=>{
    // current 关键字可以获取到 ref 容器中的 DOM 元素
    console.log(this.myRef.current.value);
  }

  showData2 = (event)=>{
    // console.log(this.myRef.current.value);
    alert(event.target.value)
  }

  render(){
    return (
      <div>
        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
        <button onClick={this.showData}>点我提示数据</button>
        <input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
      </div>
    )
  }
}