#React 学习

my-attribute-name = "my-attribute-value"

<a href="http://www.example.com">Welcome to the Web</a>;

const title = <h1 id="title">Introduction to React.js: Part I</h1>;

const panda = <img src = 'images/panda.jpg' alt = 'panda' width = '500px' height = '500px'>

const paragraphs = (
  <p>I am a paragraph.</p>
  <p>I, too, am a paragraph.</p>
);

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app')),

const names = ["赵", "钱", "孙", "李", "周", "吴", "郑", "王"];

export default function testDemo() {
  return (
    <div>
      <p>列表渲染</p>
      <ul>
        {names.map((i) => (
          <li key={i}>老{i}头</li>
        ))}
      </ul>
    </div>
  );
}

export default function CanSmoke(props) {
  const age = props.age;
  return (
    <div>
      <h1>Hello!</h1>
      {age > 18 && <h3>you can somoke!</h3>} // 与运算符,年龄大于18岁可以抽烟
    </div>
  );
}

// main.jsx
<Condition age={28} />;

/* 
  1.作为componentDidMount使用，[]作第2个参数
  2.作为componentDidUpdate使用，可指定依赖
  3.作为componentWillUnmount使用，通过return
*/
const { useState, useEffect } = React;
function App() {
  const [num, setNum] = useState(0);
  const onclick = () => setNum(num + 1);

  // 第一次渲染的时候执行
  useEffect(() => {
    console.log(`我是第一次渲染的时候执行的`);
  }, []);

  // 每次update都会执行(默认行为)
  useEffect(() => {
    console.log(`每次更新的时候执行的函数，update`);
  });

  // 条件更新(用于监听某个值变化时执行,包含第一次)
  useEffect(() => {
    console.log(`只有num更新了才会执行`);
  }, [num]);

  // 在条件中判断排除第几次更新不监听
  useEffect(() => {
    if (num !== 2) {
      console.log(`只有num不为2的时候才执行`);
    }
  }, [num]);

  return (
    <>
      <button onClick={onclick}>点击加一</button>
      <h1>{num}</h1>
    </>
  );
}

const MyContext = createContext(defaultValue); // 这里传入数据对象

<MyContext.provider value={{ n, setN }}>
  <p>Num {n}</p>
  <Child />
</MyContext.provider>

const { n, setN } = useContext(c);

/* 先构造一个context,可以添加默认值,当没有数据提供者的时候从默认值中获取 */
const CompanyContext = createContext();

class CompanyContainer extends Component {
  state = {
    companyName: "光华钢铁贸易公司",
    employees: 1234566767,
    name: "赵大强",
    teamName: "改革机动小组",
    teams: 200,
    title: "总经理",
  };

  render() {
    return (
      <CompanyContext.Provider value={this.state}>
        {" "}
        // 将state中的数据传递给Context提供者
        <Company /> // 第一个子组件
      </CompanyContext.Provider>
    );
  }
}

const Company = () => (
  <CompanyContext.Consumer>
    {" "}
    // Context内容的消费者
    {({ companyName, employees, teams }) => (
      <>
        <h1>
          公司名: <span>{companyName}</span>
        </h1>
        <p>
          成员: <span>{teams}</span>
        </p>
        <Team /> // Team 子组件
        <p>
          联系电话: <span>{employees}</span>
        </p>
        <Employee /> // Employee子组件
      </>
    )}
  </CompanyContext.Consumer>
);

const Team = () => (
  <CompanyContext.Consumer>
    {({ teamName }) => (
      <p>
        我来自： <span>{teamName}</span> 团队。
      </p>
    )}
  </CompanyContext.Consumer>
);

const Employee = () => (
  <CompanyContext.Consumer>
    {({ name, title }) => (
      <p>
        我是一个总经理,我的名字是：{name},我的头衔是 <span>{title}</span>
      </p>
    )}
  </CompanyContext.Consumer>
);

// 用处二： 在react中操作dom
function App2() {
  const textEl = useRef(); // dom节点的值被传入了 ref对象的 current中

  const clickHandler = () => (textEl.current.innerText = "hello world");

  return (
    <div>
      <button onClick={clickHandler}>点我改变h1标签内容</button>
      <h1 ref={textEl}>Nice</h1>
    </div>
  );
}

// 用处三： 获得 Previous 的值
function App3() {
  const [name, setName] = useState("");
  const previousName = useRef("");
  const countRender = useRef(0);

  useEffect(() => {
    previousName.current = name;
  }, [name]);

  useEffect(() => {
    countRender.current += 1;
  });

  return (
    <>
      <input type="text" onChange={() => setName(event.target.value)} />
      <hr />
      <p> My name is {name} </p>
      <p> My previous name is {previousName.current} </p>
      <p>Render times is {countRender.current} </p>
    </>
  );
}

function App() {
  return (
    <p>I would</p>
    <p>really like</p>
    <p>to render</p>
    <p>an array</p>
  );
}
// 错误语法，多个并列元素需要用div包裹

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns /> // 此处的Columns是横向子组件，外层为 tr 标签
        </tr>
      </table>
    );
  }
}

function () {
    return (
    	<div>
        	<td>hello</td>
        	<td>one</td>
        	<td>two</td>
        </div>			// 作为组件返回时会失效不显示，打破了层级关系
    )
}

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        //如果没有key，React将会展示一个key warning
        < key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </>
      ))}
    </dl>
  );
}