react - 前端笔记 JSRUN

最简单实例

// 
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

//
function Test(props) {
  return (
    <div>
      <h1>now :{props.date.toLocaleTimeString()}</h1>
    </div>
  );
}
ReactDOM.render(
  <Test date={new Date()} />,
  document.getElementById('example')
);

生命周期

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

JSX

// Ta 既不是字符串也不是 HTML。
// 自定义属性加 data- 前缀，表达式写在花括号 {} 中，class => className ,内联 style 不用写px，注释需要写在花括号中{},JSX 允许在模板中插入数组，数组会自动展开所有成员：

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};

var elist = [
  <h1>h1h1h1h1</h1>,
  <h2>h2h2h2h2</h2>,
];

const element = <div>
    <h1 data-id = "1" className = "testClass" style = {myStyle}>
        {/*注释...*/}
        Hello, world!
    </h1>;
    {elist}
</div>


ReactDOM.render(
    element,
    document.getElementById('example')
);

组件

//函数定义
function HelloWorld(props) {
    return <h1>Hello World!</h1>;
}

//class 定义
class HelloName extends React.Component {
  render() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

const HelloWorld = <HelloWorld />;
const HelloName = <Hello />;

function allElement() {
    return (
    <div>
        <HelloWorld />
        <HelloName name="wxw" />
    </div>
    );
}

ReactDOM.render(
    allElement,
    document.getElementById('example')
);

State 可变 / Props 不可变

//更新组件的 state， 重新渲染用户界面
function Time(props) {
  return <h2>now: {props.date.toLocaleTimeString()}.</h2>;
}

class TimeName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.interval = setInterval(
      () => this.add(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  add() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <Time date={this.state.date} />
      </div>
    );
  }
}

TimeName.defaultProps = {
  name: 'wxw'
};

const element = <TimeName />

ReactDOM.render(
  element,
  document.getElementById('example')
);

事件

//html
<button onclick="btnclick()">
  按钮
</button>

//React 
<button onClick={btnclick}>
  按钮
</button>



//html 阻止默认事件 return false
<a href="#" onclick="console.log('点击链接'); return false">
  点击a
</a>

//react 阻止默认事件 preventDefault
function TestEle() {
  function aLink(e) {
    e.preventDefault();
    console.log('链接被点击');
  }

  return (
    <a href="#" onClick={aLink}>
      点击a
    </a>
  );
}

条件渲染

// js   if判断
if(num.length){
    return <h2>{num}</h2>
}else{
    return null
}

// jsx  花括号 + 表达式
{num.length > 0 &&
  <h2>
    {num} 
  </h2>
}

列表

const nums = [1, 2, 3, 4, 5];
const listItems = nums.map((item) =>
  <li key={index}>{item}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('example')
);

ref 可以绑定到 render() 输出的任何组件上

<input type="text" ref="myInput" />
var input = this.refs.myInput;
var inputValue = input.value;

其他api

// 使用的时候查询
设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted