注：本文是阅读《深入React技术栈》的一些心得，一部分内容和图片是直接摘抄自此书。 React 组件的生命周期函数是 react 的基础知识，如果有不熟悉的可以看官方文档。简单总结如下。 组件的生命周期函数分为两类：挂载或卸载过程 / 组件更新时。挂载或卸载过程涉及到三个函数：componentWillMount - 组件即将挂载、componentDidMount - 组件挂载完成、componentWillUnmount - 组件即将卸载。这些函数都只会在组件初始化或者卸载时运行一次。 组件更新时涉及到四个函数： shouldComponentUpdate - 判断组件是否需要更新、componentWillUpdate - 组件即将更新、componentDidUpdate - 组件完成更新、componentWillReceiveProps - 组件即将接收新的 props。 生命周期整体流程图 - 图片来自于《深入React技术栈》 setState 更是基础的不能再基础的知识了，用来更新组件的状态。需要注意的是 setState 是一个异步方法，一个生命周期内所有的

当然，React也是提倡组合优于继承的，这里对一些新手来说，往往他们喜欢用继承，我们来看一下如果用组合来更好的来解决问题吧~ 这里的这个例子所实现的功能，当时用vue1实现的时候特别困难，如今vue2应该也支持了相应的功能，不过当我看到入门文章的这里的时候，我感觉这是React很强大的地方，简单来说就是，可以进行依赖注入，注入什么呢？当然什么都可以，这就给UI组件强大的灵活能力，即父组件只用实现那些不变的部分，那些变化的部分我只需要抽取出来行程单独的子组件，这样父组件在不知道他内部某些部分是什么样子的时候就可以进行抽象。 还是先看例子来理解一下： function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> ); } function WelcomeDialog() { return ( <FancyBorder color="blue"> <h1 className="

官方文档叫Lifting State up，不知道我翻译的是否妥当，哈哈哈。 组件之间的数据有些肯定是共享的，也就是说这个共享数据不管在什么地方被改变了，所有组件都要及时的反应到自身上，官方推荐提炼共有状态到他们最近的祖先上。举个例子来理解这个东东，例如有个温度计，当温度到100以上时候水开，反之不开。 function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The water would boil.</p>; } return <p>The water would not boil.</p>; } 然后我们添加一个计算器来输入温度 class Calculator extends React.Component

对于表单的处理，react的处理和原生很相像，所以没有什么多说的，就是看例子吧~ 以下就是input, textarea, select的用法，其实都一样，把state的值挂载到相应位置的value上，并且监听相应的事件即可，注意事件的写法onChange驼峰哦。回调函数的第一个参数是event哦，原生event对象可以做一些例如消除默认行为和停止冒泡的事情。这些被控制的组件叫做controlled components。 然后你会发现这也太麻烦啦，每一个表单控件我都得写一个handler区处理它，这样的话不仅麻烦而且和原生代码以及非react得库难以整合，所以有uncontrolled components, 来改善这一情况，会另起文章来记录~ class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.

列表渲染也很简单，利用map方法返回一个新的渲染列表即可，例如： const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('root') ); 基础列表组件的构造中，有一个重要的属性值key需要你进行指定，这个很重要，和帮助框架进行性能优化有关，具体深入原因后续会继续了解，先来看例子： function NumberList(props) { const numbers = props.numbers; const listItems

React的事件处理和DOM的事件处理是很相似的，只是有一些语法上的区别： React的事件名是驼峰的，不是小写的 在JSX语法中，你传递一个fucntion作为时间处理器，而不是一个string 举个例子： <button onClick={activateLasers}> Activate Lasers </button> 而且如果你想拿到事件对象event，这个对象是React按照w3c标准完成的，所以不用担心浏览器的兼容性，可以像如下这样： function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a>

可以根据state的值进行组件的条件渲染。例如： function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } ReactDOM.render( // Try changing to isLoggedIn={true}: <Greeting isLoggedIn={false} />, document.getElementById('root') ); 你还可以用变量去存储组件，以便进行条件筛选，使得渲染函数的返回值更加清爽，例如： class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.