3.react basic 组件component 、useState变量双向绑定、domStyles样式css 、 useRef获取dom对象

1.组件component

var count = 0;
// 约定： 组件定义 为 首字母为大写的函数
function MyButton (text,db) {
  return (<button onClick={db}>{ text}</button>)
  }
function App () {
  return (
    <div className="App">
      {/* 组件化开发 */}
      {MyButton('点击', () => {
        count+=1
        console.log(count)
      })}
    </div>
  );
}

2.useState hooks 变量双向绑定

import { useState } from 'react';
 
function App () {
  // 响应式 变量 useState
  /** 1.
    * @Instructions 只能在函数内部调用
    * @注意  只有使用结构出来的set方法设置变量才会引发视图更新，直接修改视图不更新
    * @count 状态变量
    * @setCount 修改方法
  */
  const [count, setCount] = useState(0);
  /**
   * 2.修改复杂数据类型
   * @param {*} param 
   */
  const [form, setForm] = useState({
    name:'你好'
  })
function handleClick (param) { 
  setCount(count+1)
  }
  function handleSetForm (param) { 
    setForm({
      ...form,
      name:'李四'
    })
  }
  return (
    <div className="App">
      {/* 组件化开发 */}
      <div>当前响应变量：{count}</div>
      <button onClick={handleClick}>点击+1</button>
      <hr />
      <div>复杂数据类型修改：{form.name}</div>
      
      <button onClick={handleSetForm}>修改名称</button>

    </div>
  );
}

3.domStyles 标签样式css

import '../studyRootStyles/07domStyles.css'

 const style={color:'skyblue',fontSize:'30px'}
function App () {
  return (
    <div className="App">
      {/* 行内 样式css */}
      <div style={{color:'red',fontSize:'26px'}}>行内样式</div>
      <div style={style}>行内样式</div>
      {/* 类名控制样式 */}
      <div className="classChangeStyles">类名样式</div>

    </div>
  );
}

4.useRef获取dom对象进行操作

import { useRef } from 'react';
// React获取dom
function App () {
  const inputRef = useRef(null);
  const getDom = () => {
     console.log(inputRef.current);
  }
  return (
    <div className="App">
     {/* 1.useRef 生成ref对象 ， 通过ref={ref对象} 绑定到dom上*/}
      {/* 2.dom可用时 ref.current获取dom对象进行操作 */}
      <input type="text" ref={ inputRef} placeholder='点击右侧获取dom' />
      <button onClick={getDom}>点击获取dom</button>

    </div>
  );
}