# react使用手册

var HelloWorld = React.createClass({  
  render:function(){  
    var styles = {   color: 'blue',  fontSize: '30'  }  
    return (  
      <div className="box">  
        <h3 className="title" 
          style={{color:'red',backgroundColor:'lime'}}>默认标题</h3>  
        <p className="subtitle" style={styles}>说明</p>  
        <p className="details">这个是用来教学的案例</p>  
      </div>  
    )  
  }  
})  
ReactDOM.render(<HelloWorld/>,document.getElementById("app"))  

<div className={(this.state.menuIndex === i ? 'active' : '')} />
<div className={(this.state.menuIndex === i ? 'active button' : 'button')} />

// 参数是对象，对象的属性是类名，属性值判断是否加这个类名
setClassNames = (obj) => {
  if ( typeof obj !== 'object') {return '';} // 参数不是对象直接返回空不处理
  let key;
  let str = '';
  for (key in obj) {
    if(obj[key]) { str += ' ' + key; } // 如果对象属性值是true，则加上这个类
  }
  return str;
}
return (<span
   className={this.setClassNames({
       'active': this.state[e.key] === item.value,
       'forbidden': this.state.dimensional === e.value,
   })}
>{item.name}</span>)

class Input extends Component {
  focus = () => { this.textInput.focus(); }
  render(){
    return (<input ref={(input) => { this.textInput = input }} />)
	}
}

class Son extends React.Component {
  getShowData = (params) => { console.log('params ', params) }
  render() { return ( <div>12312</div> ) }
}
class father extends React.Component {
  // 获取子组件引用
  getRef = (ele) => {
    this.incomeTable = ele;
    if (ele) {
      const params = {a: 1, b: 2}
      ele.getShowData(params);
    }
  }
  render() {
    return (  <Son  ref={this.getRef} /> )
  }
}

// <Input>来源于上面的示例代码👆
class AutoFocusTextInput extends Component {
  componentDidMount(){
    this.textInput.focus();
  }
  render(){
    return (
      <Input ref={(input) => { this.textInput = input }}>
    )
	}
}

function CustomTextInput(props) {
  return (<input ref={props.inputRef} />);
}
class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput inputRef={el => this.inputElement = el} />
		);
	}
}

import React from 'react';
// 1. 创建一个Context文件，所有地方都只能引入这一个文件{Provider, Consumer}
export const UserContext = React.createContext(defaultValue);
// 也可以用这个：export default React.createContext({});

// 2. 设置变量，Provider接收一个 value 属性，这个变量就是Context用到的变量，所有用到的变量的组件都要包裹在Provider下面。
// 要引入UserContext文件
<UserContext.Provider value={{ name: 'Alice', age: age, setAge: setAge }}>
  <Content />
</UserContext.Provider>

// 3. 使用变量：Consumer接收一个函数作为子节点函数接收当前 context 的值并返回一个 React 节点。传递给函数的 value 将等于组件树中上层 context 的最近的 Provider 的 value 属性。
// 如果 context 没有 Provider ，那么 value 参数将等于被传递给 createContext() 的 defaultValue 。
// 要引入UserContext文件
<UserContext.Consumer>
  { value => (<div>名字：{value.name}，年龄：{value.age}</div>)}
</UserContext.Consumer>

// 4. 其他方式使用变量
// 4.1 函数组件：使用React.useContext(UserContext)，具体看下面例子
// 4.1 类组件：使用 contextType，具体看下面例子

// contextTest.js：定义一个context 文件，所有用到这个context的组件都要引用这个文件
import React from 'react';
export const UserContext = React.createContext();

// 共同的父组件发布变量
import React from 'react';
import { UserContext } from '@views/contextTest.js'; // 引入共同的 Context
const Content = () => (<div> <UserInfo /> </div>);
const App = () => (
  const [age, setAge] = React.useState(256); // 让子组件可以修改 Context
  <UserContext.Provider value={{ name: 'Alice', age: age, setAge: setAge }}>
    <Content />
  </UserContext.Provider>
);

// 函数组件使用变量：1、通过useContext使用。2、通过Consumer使用
// 修改变量可以通过给useContext 传方法，然后调用方法修改变量
import { useContext } from 'react';
import { UserContext } from '@views/contextTest.js'; // 引入共同的 Context
export default function UserInfo() {
  const user = useContext(UserContext); // 1、通过useContext获取变量
  return (<div>
    <p>用户名: {user.name}</p> <p>年龄: {user.age}</p>
    <button onClick={() => { user.setAge(user.age + 1); }}>增加年龄</button>
    <UserContext.Consumer> {/* 2、通过Consumer获取变量 */}
      { value => (<div>名字：{value.name}，年龄：{value.age}</div>)}
    </UserContext.Consumer>
  </div>);
}

// 类组件使用变量：1、通过contextType。2、通过Consumer使用(跟上面的函数组件一样，这里不写了)
// class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。
// 这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中。
// 如果你正在使用实验性的 public class fields 语法，你可以使用 static 这个类属性来初始化你的 contextType。
class UserInfo extends React.PureComponent {
  static contextType = UserContext;
  componentDidMount() {
    // 使用contexType可以在任意生命周期访问数据，使用 this.context 来消费最近 Context 上的那个值
    const value = this.context;
    console.log(value);
  }
  render() {
    return (<div>name:{this.context.name}age:{this.context.age}</div>);
  }
}

// 多个context 文件
const SchoolContext = React.createContext({
  name: '南师附中',
  location: '南京',
});
const StudentContext = React.createContext({
  name: 'chengzhu',
  age: 17,
});
export { SchoolContext, StudentContext };

// 共同父组件发布变量， 直接写调用的地方
<SchoolContext.Provider value={school}>
  <StudentContext.Provider value={student}>
    <MiddlePage />
  </StudentContext.Provider>
</SchoolContext.Provider>

// 使用变量，直接写调用的地方
<SchoolContext.Consumer>
  {school => (
    <StudentContext.Consumer>
      {student => {
        return (
          <div>
            学校: {school.name}，位置: {school.location}
            学生姓名: {student.name}，学生年龄: {student.age}
          </div>
        );
      }}
    </StudentContext.Consumer>
  )}
</SchoolContext.Consumer>

this.setState({ tt: 20}, () => { console.log('tt: ', this.state.tt) });
this.setState({ tt: 50}, () => { console.log('tt: ', this.state.tt) });

constructor(props, context) {
  super(props, context)
  this.state = { value: 1 };
}
// 第一次render后的生命周期
componentDidMount () {
  let value = 10;
  this.setState({tt: 10,})
  console.log('tt: ', this.state.tt);	// 此时输出的是1
}

componentDidMount () {
  this.setState({ tt: 20}, () => {
    this.pp();
  });
  // this.setState({tt: 30}, this.pp ) 此方法也可以
}
pp = () => { console.log('tt: ', this.state.tt) }

componentDidMount () {
 this.setState({tt: 40})
 setTimeout(this.pp, 0);	// 40
}
pp = () => { console.log('tt: ', this.state.tt) }

constructor(props, context) {
  super(props, context)
  this.state = { value: 1 };
  this.value = 1; // 直接把变量放在这里
}

this.setState(prevState => ({
  collapsed: !prevState.collapsed
}));

function HelloComponent(props) {
    return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="marlon" />, mountNode)

const Todo = (props) => (
  <li
    onClick={props.onClick}
    style={{textDecoration: props.complete ? "line-through" : "none"}}
  >
    {props.text}
  </li>
)

const Todo = ({ onClick, complete, text, ...props }) => (
  <li
    onClick={onClick}
    style={{textDecoration: complete ? "line-through" : "none"}}
    {...props}
  >
    {props.text}
  </li>
)

function TestComp(props){
  let ref;
  return ( <div ref={(node) => ref = node}></div> )
}

import React from 'react';
export default function () {
    return [ <div>一步 01</div>, <div>一步 02</div>, <div>一步 03</div> ];
}

import React from 'react';
export default function () {
  return (
    <React.Fragment>
      <div>一步 01</div>
      <div>一步 02</div>
    </React.Fragment>
  );
}

import React from 'react';
export default function () {
  return (
    <>
    <div>一步 01</div>
    <div>一步 02</div>
    </>
  );
}

function MyComponent(item) {
  const replaceHtml = (str) => { return str.replace('/', '')}
  // return <div dangerouslySetInnerHTML={createMarkup()} />;
  // <div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />
  return <div dangerouslySetInnerHTML={{__html:replaceHtml(item.process)}} />
}

function ListItem ({ children }) {
  children() // 当函数执行，需要加判断
  return (<div>{ children } </div>);
}
{/* 当写了子组件， 那么props.children的值就是子组件，手动传的children属性无效*/}
<ListItem children="手写的">
  普通文本
  <div>标签</div>
  {() => console.log('函数')}
</ListItem>

<Grid>Hello world!</Grid>
<Grid>
  
  Hello
  
  world!
</Grid>

class ChildrenCounter extends React.Component {
  render() {
    return <p>React.Children.count(this.props.children)</p>
  }
}
<ChildrenCounter> {/* 1个 */}
  Second!
</ChildrenCounter>
<ChildrenCounter> {/* 2个 */}
  <p>First</p>
  <ChildComponent />
</ChildrenCounter>
<ChildrenCounter> {/* 2个, 函数不统计，实测结果 */}
  {() => <h1>First!</h1>}
  Second!
  <p>Third!</p>
</ChildrenCounter>

function IgnoreFirstChild({ children }) {
  return (<div>
    {React.Children.map(children, (child, i) => {
      if (i < 1) return null; // 忽略第一个元素
      return child;
    })}
  </div>);
}
{/* 使用 */}
<IgnoreFirstChild>
  <ListItem /> {/* 忽略这个元素 */}
  <p>Third!</p>
</IgnoreFirstChild>

<IgnoreFirstChild>
  {() => <h1>First!</h1>} {/* React.Children 会忽略这个函数 */}
</IgnoreFirstChild>

const element = Children.only(children);

export function RowList({ children }) {
  return (<div className="RowList"> 1{children} </div>);
}

export function Row({ children }) {
  return (<div className="Row">{children}</div>);
}
export default function App() {
  return (
    <RowList>
      <Row><p>这是第一项。</p></Row>
      <Row><p>这是第二项。</p></Row>
      <Row><p>这是第三项。</p></Row>
    </RowList>
  );
}

export function RowList({ rows }) {
  return (
    <div className="RowList">
      {rows.map(row => (
        <div className="Row" key={row.id}>
          {row.content}
        </div>
      ))}
    </div>
  );
}
export default function App() {
  return (
    <RowList rows={[
      { id: 'first', content: <p>这是第一项。</p> },
      { id: 'second', content: <p>这是第二项。</p> },
      { id: 'third', content: <p>这是第三项。</p> }
    ]} />
  );
}

export function TabSwitcher({ tabIds, getHeader, renderContent }) {
  const [selectedId, setSelectedId] = React.useState(tabIds[0]);
  return (
    <div>
      {tabIds.map(tabId => (
        <button key={tabId} onClick={() => setSelectedId(tabId)}>
          {getHeader(tabId)}
        </button>
      ))}
      <hr />
      <div key={selectedId}>
        <h3>{getHeader(selectedId)}</h3>
        {renderContent(selectedId)}
      </div>
    </div>
  );
}
export function App() {
  return (
    <TabSwitcher
      tabIds={['first', 'second', 'third']}
      getHeader={tabId => tabId[0].toUpperCase() + tabId.slice(1)}
      renderContent={tabId => <p>This is the {tabId} item.</p>}
    />
  );
}

export function Father({ children }) {
  const name = 'jack';
  return (<div>
    父组件，引入的子组件{React.cloneElement(children, { name: name })}
  </div>);
}
export function Show({ name, age }) {
  return (<p>我是子组件 名字：{name}, 年龄：{age}</p>);
}
export function App() {
  return (<Father><Show age="18" /></Father>);
}

function ShowName({ id }) { // 有hooks状态的函数
  const [name, setName] = React.useState('hello');
  React.useEffect(() => {
    console.log(`${id} name:`, name);
  });
  return (<div>
    <div>{name}</div>
    <button onClick={() => setName(`${name} o`)}>{id} name</button>
  </div>);
}
function ShowAge({ age }) { // 无状态的纯函数
  return (<div>{age}</div>);
}
// 在类组件中测试
class Home extends React.Component {
  render() {
    return (<div>
      <ShowName />
      {/* {ShowName()} */} {/* 执行有hooks的函数会报错：Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. */}
      <ShowAge age={18} />
      {ShowAge({ age: 19 })}
    </div>);
  }
}
// 在函数组件中测试
function People(params) {
  React.useEffect(() => {
    console.log('父 useEffect');
  });
  return (<div>
    <ShowName />
    {ShowName({ id: 'one' })}
    {ShowName({ id: 'two' })}
    <ShowAge age={18} />
    {ShowAge({ age: 19 })}
  </div>);
}

const SomeComponent = memo(Component, arePropsEqual?)

function Head() {
  return <div>Head,{Math.random()}</div>;
}
const HeadOne = React.memo(() => <div>HeadOne,{Math.random()}</div>);
function App() {
  const [count, setCount] = React.useState(1);
  const list = [10, 20];
  const show = () => {};
  return (<div>
    <div>App count={count}</div>
    <button onClick={() => { setCount(count + 1); }}>添加</button>
    <Head />
    <HeadOne name="jack" />
    <HeadOne list={list} />
    <HeadOne onClick={show} />
  </div>);
}
// 类组件中，由于this在类存在期间不会变，所以绑定到this上的变量和方法不会变，当props属性传给子组件，值不变不会触发子组件渲染
class App extends React.PureComponent {
  constructor(props) { super(); this.state = { count: 0 }; this.list = [10, 20]; }
  show = () => {};
  render() {
    const { count } = this.state;
    return (<div className="">
      <div>App11 count={count}</div>
      <button onClick={() => { this.setState({ count: count + 1 }); }}>添加</button>
      <HeadOne list={this.list} />
      <HeadOne onClick={this.show} />
    </div>);
  }
}