一、环境
- HTML(即模板引擎的时候)可以使用
cdn
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
- 前端项目构建
#淘宝镜像
$ npm config set registry https://registry.npm.taobao.org
# my-app即项目名
$ npm install -g create-react-app
$ reate-react-app my-app
$ cd my-app/
$ npm start
HelloWorld
<div id="example"></div>
<div id="cs"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
ReactDOM.render(
<h1>测试</h1>,
document.getElementById('cs')
);
</script>
事件
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {name:'Hello world!'};
// React.createRef()类似Vue的this.$refs.xxx
this.myTextInput = React.createRef();
// 这边绑定是必要的,这样 `this` 才能在回调函数中使用
// this.handleClick = this.handleClick.bind(this)
}
// 直接写就得绑定
// handleClick() {
// this.myTextInput.current.focus();
// }
// 这个语法确保了 `this` 绑定在 handleClick 中
handleClick = () => {
console.log('this is:', this);
this.myTextInput.current.focus();
}
preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
}
render() {
/**
* 事件驼峰onClick
*/
return (
<div>
<input type="text" ref={this.myTextInput} />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
{/* 通过 bind() 方法传递参数。 */}
<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
</div>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
列表&Keys(循环)
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 循环不分配key,会出现警告 a key should be provided for list items(意思就是需要包含 key)
// key应该在数组的上下文中被指定
// (同列表中)唯一性
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
// 传递的参数
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);
组件 API
- 设置状态:
setState(nextState, callback)
合并
nextState
和当前state
,并重新渲染组件。
setState
是React事件处理函数中和请求回调函数中触发UI更新的主要方法。- 不能在组件内部通过
this.state
修改状态,因为该状态会在调用setState()
后被替换。setState()
总是会触发一次组件重绘,除非在shouldComponentUpdate()
中实现了一些条件渲染逻辑。
setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。
- 替换状态:
replaceState(nextState, callback)
replaceState()
方法与setState()
类似,但是方法只会保留nextState
中状态,原state不在nextState
中的状态都会被删除。
- 设置属性:
setProps(nextState, callback)
更新组件,我可以在节点上再次调用
React.render()
,也可以通过setProps()
方法改变组件属性,触发组件重新渲染。
- 替换属性:
replaceProps(nextState, callback)
replaceProps()
方法与setProps
类似,但它会删除原有 props。
- 强制更新:
forceUpdate(callback)
- 获取DOM节点:
findDOMNode()
- 判断组件挂载状态:
isMounted()
isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。
组件生命周期
组件的生命周期可分成三个状态:
Mounting
(挂载):已插入真实 DOM
当组件实例被创建并插入 DOM 中时,其生命周期调用顺序:
- constructor(): 在 React 组件挂载之前,会调用它的构造函数。
- getDerivedStateFromProps(): 在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。
- render(): render() 方法是 class 组件中唯一必须实现的方法。
- componentDidMount(): 在组件挂载后(插入 DOM 树中)立即调用。
Updating
(更新):正在被重新渲染
每当组件的 state 或 props 发生变化时,组件就会更新。
getDerivedStateFromProps()
: 在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值,判断 React 组件的输出是否受当前 state 或 props 更改的影响。shouldComponentUpdate()
:当 props 或 state 发生变化时,
shouldComponentUpdate() 会在渲染执行之前被调用。render()
: render() 方法是 class 组件中唯一必须实现的方法。getSnapshotBeforeUpdate()
: 在最近一次渲染输出(提交到 DOM 节点)之前调用。componentDidUpdate()
: 在更新后会被立即调用。
Unmounting
(卸载):已移出真实 DOM
componentWillUnmount()
: 在组件卸载及销毁之前直接调用。